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.

Property NameType
background-coloras color
background-positionas repeatable list of simple list of length, percentage, or calc
border-bottom-coloras color
border-bottom-widthas length
border-left-coloras color
border-left-widthas length
border-right-coloras color
border-right-widthas length
border-spacingas simple list of length
border-top-coloras color
border-top-widthas length
bottomas length, percentage, or calc
clipas rectangle
coloras color
font-sizeas length
font-weightas font weight
heightas length, percentage, or calc
leftas length, percentage, or calc
letter-spacingas length
line-heightas either number or length
margin-bottomas length
margin-leftas length
margin-rightas length
margin-topas length
max-heightas length, percentage, or calc
max-widthas length, percentage, or calc
min-heightas length, percentage, or calc
min-widthas length, percentage, or calc
opacityas number
outline-coloras color
outline-widthas length
padding-bottomas length
padding-leftas length
padding-rightas length
padding-topas length
rightas length, percentage, or calc
text-indentas length, percentage, or calc
text-shadowas shadow list
topas length, percentage, or calc
vertical-alignas length
visibilityas visibility
widthas length, percentage, or calc
word-spacingas length
z-indexas integer

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.

This entry was posted in CSS CheatSheets and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *