CSS ANIMATION PROPERTY

Question

Difference between transition and animation.

Answer 1

Animation property of css combines multiple animation-related properties into one.
It's components are:-

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

Answer 2

The main difference between transition and animation is that the transition needs to be triggered by some state like :hover (cursor points on the element), :active (mouse is pressed on element) etd. and it plays only once. Animation on the other hand does NOT require any trigger, so it can play immediately and can repeat infinitely. You can also create keyframes for animation, so you can interpolate between many values. Transition only interpolates between two values, for example color red to green. With animation you can interpolate from red to green then to blue then to purple etc.