Recently I appeared for my first interview and I was asked this question, so I want to know what can be a well rounded good answer to this.
Q-> What is the difference between CSS transitions and animations, not
use-case/application but in terms of functionality and system performance.
Animations are declarative but keyframed and allow you to change multiple properties at the same time (set state, advance time, set state, advance time, set state, advance time). Transitions are completely declarative and only act on a single property (browser decides how to do it, you just say “move to this state over some period of time”). Performance is entirely dependent on what’s being done, one cannot be said to be more performant than the other unless you know what is actually being animated.
what does being declarative mean here, as we can define both while using
It means you tell the computer what to do without specifying how it should do it, opposite of procedural. If it’s keyframed it means you’re specifying a procedural set of steps (you define what happens at each keyframe, and there is a smooth animation between that and the next frame, so each transition between frames is declarative)
Ok Dan, thanks for this explanation.