The transition properties allow for multiple transitions in one call. For example, if we want to change the color at the same time as changing the rotation and size, we can.
snippet
transition-property: transform, color;
transition-duration: 0.2s;
transition-timing-function: ease-out;
Specify different durations and timing functions for each property being animated. Simply include each value in a comma-separated list, using the same order as in your transition-property:
snippet
transition-property: transform, color;
transition-duration: 0.2s, 0.1s;
transition-timing-function: ease-out, linear;
The above properties will apply an ease-out transition over 0.2 seconds to the transform, but a linear transition over 0.1 seconds to the color.
To have multiple transitions when using the transition property, specify all the values for each transition together, and separate each transition with commas:
transition: color 0.2s ease-out, transform 0.2s ease-out;
An example to change both properties at the same rate and delay.
snippet
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
Include the various transition properties to have various transition effects as a comma-separated list, including, at minimum, the transition-property and transition-duration for each.
