Animation and Transition effects on CSS

Question

I work with them and i understand the code, but the differences between Animation effects and transition effects not.

As i thougt animation effects are just, an instant animation on the style? And the transition effects mhm, just control different points of time since the animation starts and finishes?

Thanks for any help, but I read on W3C, other forums, mozilla docs, and i don't understand the differences between them.

Answer 1

Animations can repeat any number of times
Animations can be specified to go in a forward and reverse direction
Animations can have any number of defined intermediate steps, called “keyframes”, but transitions only have a defined start and end “keyframes”.
With transitions we can specify an animation for any property which changes, using the all keyword. With animations, we need to specify every property we want animated.

Transition: Movement from one stage to another with some css property.It also have duration

A transition is an animation that happens between changes. Prior to CSS3, when an element changed on a web page it was either in one state or another. For example, if a button changes when moused over it starts in the off state and ends in the on state. You can transition any CSS property from one state to another. This means it is possible to create motion effects (by transitioning between one position and another), blurring effects (by transitioning colors), and more.

Answer 2

• A transition is for state change. menu open an close example.

• If you want the same irespective state changes and have more control over it then you've got to use an animation.

Transition: A movement, development, or evolution from one form, stage, or style to another

Animation: Endowed with life or the qualities of life; full of movement

Answer 3

This link here explains it pretty well: Animation vs Transition

Some points it makes:

Similarities

Specify which CSS properties to listen for changes on

Set timing (easing) functions to alter the rate of going from a one property value to another

Specify a duration to control how long the animation or transition will take

Programmatically listen to animation and transition-specific events that you can then do with as you wish

Visualize CSS property changes.

Then differences:

Differences

Animations and transitions show their differences when it comes to how you trigger them to play, whether they loop easily, how complicated of a transition you can define, how formal you must be in being able to use them, and how well they play with JavaScript. Let's explore those topics in greater detail. (Look at link)

Conclusion:

Conclusion

If what I want requires the flexibility provided by having multiple keyframes and easy looping, then I go with an animation.

If I am looking for a simple from/to animation, I go with a transition.

If I want to manipulate the property values that I wish to animate using JavaScript, I go with a transition.

Please take a look at the link, as it goes much further in detail.