From the moment I first started learning CSS, I was simultaneously excited and terrified of learning CSS animations. On the one hand, animations are maybe the most exciting and fun aspect of CSS. The simplest animation can breathe life into a user interface and completely transform it.

On the other hand, it’s very hard to make really visually interesting animations. As someone relatively new to web development, I wasn’t sure that diving deep into CSS animations was the best use of my time, but ultimately I had to try them out. They turned out to be just as fun and difficult as I expected.

Animation vs. Transition

When I first started playing around with CSS animations, I thought it would be cool animate some text when you hovered over it. I had already set an animation on this piece of text, but I assumed I could set a new animation property using the :hover pseudo-class.

This resulted in some strange behavior. When I hovered over the text, it switched erratically between the two different animations. What I really wanted to use here was a transition.

Transitions are the better choice for animating transitions to pseudo-class states. Using the transition property, you can tell CSS which property’s transition to animate and for how long.

#css #web-development #web-design #css-animation