CSS: Animation vs. Transition

by

It looks like you’ve got a handle on how to do them, just not when to do them.

A transition is an animation, just one that is performed between two distinct states – i.e. a start state and an end state. Like a drawer menu, the start state could be open and the end state could be closed, or vice versa.

If you want to perform something that does not specifically involve a start state and an end state, or you need more fine-grained control over the keyframes in a transition, then you’ve got to use an animation.

More Related Contents:

  1. Use CSS3 transitions with gradient backgrounds
  2. css3 transition animation on load?
  3. How can I transition width of content with width: auto?
  4. Why can’t I animate custom properties (aka CSS variables)?
  5. Animating max-height with CSS transitions
  6. Transitions on the CSS display property
  7. Maintaining the final state at end of a CSS3 animation
  8. Prevent flicker on webkit-transition of webkit-transform [duplicate]
  9. CSS3 animation not working in safari
  10. Hover effect : expand bottom border
  11. Passing parameters to css animation
  12. CSS transition shorthand with multiple properties?
  13. Spin or rotate an image on hover
  14. Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
  15. CSS how to make an element fade in and then fade out?
  16. Changing :hover to touch/click for mobile devices
  17. CSS3 Transition – Fade out effect
  18. Flip a 3D card with CSS
  19. How to add animated gradient to an svg path?
  20. Reuse CSS animation in reversed direction (by resetting the state?)
  21. Pure CSS animation visibility with delay
  22. Less CSS: Mixins with Variable Number of Arguments
  23. Delay mouseout/hover with CSS3 transitions
  24. Looping Animation of text color change using CSS3
  25. Image moves on hover when changing filter in chrome
  26. How can I delay the start of a CSS animation?
  27. Disable CSS animation on pseudo element inherited from parent
  28. Continuous CSS rotation animation on hover, animated back to 0deg on hover out
  29. Why does enabling hardware-acceleration in CSS3 slow down performance?
  30. Turning off Twitter Bootstrap Navbar Transition animation

Leave a Comment