Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Kit Howlett
6,774 PointsWhat is the difference between CSS Transitions and CSS Animations?
I recently took the treehouse transitions learning module and later through my own research learnt about CSS animations. I'm a little confused as both seem to do the same thing so wondered what the difference is?
Thank you!
Kit Howlett
6,774 PointsThank you Gergely!
1 Answer
Siddharth Pathak
Front End Web Development Techdegree Student 143 Pointshello 'kit' css transition set the time limit and when we combine transition with transform-proprty it creates an animation
Gergely Bocz
14,244 PointsGergely Bocz
14,244 PointsHi Kit!
There are many similarities, but there are a few key differences:
Animations need to be defined separately with the use of the @keyframes keyword and only then can they be used with the CSS animation property.
Animations have unique properties like animation-iteration-count and animation-direction that you cannot set with transitions.
Animations can have many keyframes (states) as opposed to transition's beginning and end state, and are therefore capable of creating complex features, such as loading animations or short video-like animations.
To sum it up, basically animations are more powerful and complex and are generally used to define more complex movements or changes. If you need to do simple things like change the color or size of texts (for example on link hover), then I would stick to transitions, since they are cleaner and much less of a hassle to use. My rule of thumb is that if I can do something with transitions, I don't bother using animations.
Hope I could be of help to you! If you are eager to learn more about animations (or CSS in general) I suggest you checking out https://css-tricks.com/almanac/properties/a/animation/
Best of luck!
Gergö