Motion and Feedback

Transition Button Hover

A button uses transition so hover changes in color and position are animated instead of snapping instantly.

Program

transition tells the browser which property changes should animate, how long they should take, and which timing curve to use.

The browser paints intermediate frames instead of jumping at once.Transition Timelinehover starts -> intermediate frames -> final stylebackground and translate change over 300 msrest0 msstart100 msmiddle200 mshover300 msThe browser paints intermediate frames instead of jumping at once.
Figure: A transition fills the time between hover states. Model source: books/css/09motion_feedback/transition_button_hover/diagrams/transition_timeline.semantic.json.
transition_button_hover.html 
<style>
  .button { background: #2563eb; color: white; transform: translateY(0); transition: background-color 180ms ease, transform 180ms ease; }
  .button:hover { background: #0f766e; transform: translateY(-2px); }
</style>
<button class="button">Save changes</button>
transition transition animates property changes between old and new values.
hover state :hover applies while a pointing device is over the element.