If you’ve ever used the very cool Animate.css library, you may have noticed that the animations start at a certain speed, then speed up, then slow down. That’s because the CSS3 property named animation-timing-function is by default set to ease. According to W3Schools, the ease value is described as the following:

Default value. The animation has a slow start, then fast, before it ends slowly

The linear value, which causes the animation to have a consistent speed, makes more sense in certain scenarios.1 I would love to see the possible values for this property added as an additional dropdown to Animate.css’s page.

If you’re using Animate.css and want to change this property’s default, add this to your stylesheet:

.animated {
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
}

  1. slideOutLeft and slideOutRight for example. I don’t know why you would want something that is sliding out of view to slow down as it gets closer to disappearing. ↩︎