CSS Transitions

Ok, I need to write down transitions code and its important points for my own use, sorry, everybody already knows 🙂 But need it to be written down here.

So CSS transition typically consist of transition: [CSS property or all] [transition-duration] [transition-timing-effect] [transition-delay];. But all, effect and delay could be omitted.

-webkit-transition: all 500ms ease 0.1s;
-moz-transition: all 500ms ease 0.1s;
-o-transition: all 500ms ease 0.1s;
transition: all 500ms ease 0.1s;

No need to use -ms- for transition, they are supported prefixed, but only starting from IE10.

Timing could be in seconds too, like 1s, but don’t use just 0 without units.

Transition properties (elements to which transition applies) could go in line separated by comma, like background-color, opacity.

Some properties make transition only when its property is named, all will not work.

Timing function could be: ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, cubic-bezier(number, number, number, number).

Following CSS Properties are Animatable.

This list comes from w3.org

Transitions for Image Backgrounds and CSS Gradients.

You can’t directly animate background images or CSS gradients (yet), but you may animate them with opacity stacked one on top of another.