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

1
439

Custom timing transition

.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+  */
}
css

Notes

last update:

0
439

Simple transition

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+  */
}
css

Notes

last update:

0
439

Delayed transition

.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+  */
}
css

Notes

last update: