CSS Animation

Links

Transitions

Most properties that have numbers as values (including colors) can be transitioned. But some animatable properties have values that can't be animated (such as auto).

transition-property

Use all to include all css properties in scope and inherited. Or list individual properties

transition-duration

Some valid values are 100ms, 2s, etc

It's possible to define different transition-durations, one for fading in and a different one for fading out for example. The duration on the to property will be used.

Negative values are not valid.

transitionend

End events are thrown whenever transitions end. Note that one transitionend event is thrown for each property. So, for example, if you define a transition on border, there will be one event for border-left, one for border-right, one for border-bottom, and one for border-top.

transition-timing-function

Basic timing functions include: ease, linear, ease-in, ease-out, ease-in-out. Plus you can use the cubic-bezier to do anything you want. There are a lot of other predefined advanced easing functions like easeInCubic, easeInQuart, etc, etc.

In addition to easing function, you also define the steps. Steps divide the animation into number of equal segments. It'll display either the start or end freeze frame for amount of time before progressing to next step.

transition-delay property

Positive values will delay the effect. Negative values are valid also. Negative values make the transition start immediately somewhere in the middle of the transition. In other words, it skips forward the time of the negative duration.

Pro tip: Use 50ms delay to prevent animations from starting while mouse is moved over them. Usually 50ms is too small to notice, but just long enough to prevent unwanted animation from starting.