Page 45 - CSS

Example

.Example{
height: 100px;
background: #fff;
}

.Example:hover{
height: 120px;
background: #ff0000;
}

View Result

By default, hovering over an element with the .Example class would immediately cause the
element's height to jump to 120px and its background color to red (#ff0000).

By adding the transition property, we can cause these changes to occur over time:

.Example{
...
transition: all 400ms ease;
}

View Result

The all value applies the transition to all compatible (numbers-based) properties. Any compatible
property name (such as height or top) can be substituted for this keyword.

400ms specifies the amount of time the transition takes. In this case, the element's change in height
will take 400 milliseconds to complete.

Finally, the value ease is the animation function, which determines how the animation is played.
ease means start slow, speed up, then end slow again. Other values are linear, ease-out, and ease-
in.

Cross-Browser Compatibility

The transition property is generally well-supported across all major browsers, excepting IE 9. For
earlier versions of Firefox and Webkit-based browsers, use vendor prefixes like so:

.Example{
transition: all 400ms ease;
-moz-transition: all 400ms ease;
-webkit-transition: all 400ms ease;
}

https://riptutorial.com/ 23