CSS - Transition
The CSS transition property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. It allows to define the transition between two states of an element. CSS Transition on MDN
.custom-timing-transition {
-webkit-transition: {{property}} {{duration}} {{timingFunction}}; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
transition: {{property}} {{duration}} {{timingFunction}}; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}
Implementation with vendor prefixes borrowed from CSS3 Please!
.simple-transition {
-webkit-transition: {{property}} {{duration}}; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
transition: {{property}} {{duration}}; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}
.delayed-transition {
-webkit-transition: {{property}} {{duration}} {{timingFunction}} {{delay}}; /* Android 2.1+, Chrome 1-25, iOS 3.2-6.1, Safari 3.2-6 */
transition: {{property}} {{duration}} {{timingFunction}} {{delay}}; /* Chrome 26, Firefox 16+, iOS 7+, IE 10+, Opera, Safari 6.1+ */
}