Transitions

Chapter 17

Figures & Code Examples

  1. 200 millisecond card flip
  2. Transition initial, midtransition, and final state
  3. contenteditable
  4. The input's appearance in the valid, invalid, and focused states
  5. Very slow navigation transition
  6. transitionEnd event
  7. different transition duration on revert
  8. Curve representations of named cubic Bézier functions
  9. Four Bézier curves and their cubic-bezier() values (captured from cubic-bezier.com)
  10. Useful author-defined cubic Bézier functions (from easings.net)
  11. Step timing functions
  12. Negative value for transition-delay
  13. Reversing transitions
  14. Transitioning background position with steps()