CSS Transition vs CSS Animation

Question

Where is technical difference between CSS Transition and CSS Animation?

Is animation (with keyframes) consists of several transitions?

Is keyframes support the only difference?

Are both of them are hardware accelerated?

Related post - [CSS: Animation vs. Transition](https://stackoverflow.com/q/20586143/465053) — RBT, Jun 06 '21 at 13:02

score 1 · Answer 1 · answered Nov 25 '19 at 06:18

1

Are both of them are hardware accelerated?

-- Yes, both are hardware accelerated.

for other question answer you have to refer this site

https://cssanimation.rocks/transition-vs-animation/

answered Nov 25 '19 at 06:18

Shantanu Sharma

666
6
21

you link basically says "animation is more powerful than transition because of keyframes" my question was: "are there any other differences except of keyframes" – Ruslan Nov 25 '19 at 06:22
No, both are power full according browser and hardware accelerated, but in general i found some lag if we make complex animation using highly key frames... – Shantanu Sharma Nov 25 '19 at 06:28

score 1 · Answer 2 · edited Nov 25 '19 at 08:23

Transition:

A transition is performed between two distinct states: A start state and an end state. Transitions also need a triggering event such as hover, focus and etc. Transitions are mostly used for simple animations.

Animation:

Unlike transitions, animations can be used for endless animations and have more than two states (@keyframes). They also have no boundaries.

Both use CPU acceleration for smoother effects.

CSS Transition vs CSS Animation

2 Answers2