CSS: Animation vs. Transition

1. Animation takes a lot more code unless you're using the same transition over and over, in which case an animation would be better.

2. You can have different effects for sliding in and out without an animation. Just have a different transition on both the original rule and the modified rule:

   .two-transitions {
       transition: all 50ms linear;
   }
   
   .two-transitions:hover {
       transition: all 800ms ease-out;
   }
   

3. Animations are just abstractions of transitions, so if the transition is hardware accelerated, the animation will be. It makes no difference.

4. Both are very modern.

5. My rule of thumb is if I use the same transition three times, it should probably be an animation. This is easier to maintain and alter in the future. But if you are only using it once, it is more typing to make the animation and maybe not worth it.

A shorter answer, straight on point:

Transition:

1. Needs a triggering element (:hover, :focus etc.)
2. Only 2 animation states (start and end)
3. Used for simpler animations (buttons, dropdown menus and so on)
4. Easier to create but not so many animation/effect possibilities

Animation @keyframes:

1. It can be used for endless animations
2. Can set more than 2 states
3. No boundaries

Both use CPU acceleration for a much smoother effect.

I'll let the definitions speak for themselves (according to Merriam-Webster):

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

The names appropriately fit their purposes in CSS

So, the example you gave should use transitions because it is only a change from one state to another

It looks like you've got a handle on how to do them, just not when to do them.

A transition is an animation, just one that is performed between two distinct states - i.e. a start state and an end state. Like a drawer menu, the start state could be open and the end state could be closed, or vice versa.

If you want to perform something that does not specifically involve a start state and an end state, or you need more fine-grained control over the keyframes in a transition, then you've got to use an animation.