4 min read

A first dive into CSS animations

Categories

CSS is one of those things that everyone has a strong opinion about. For some reason, it seems like you are only allowed to love it or hate it.

It’s quite well-known that it can be a struggle to work with. Some people even avoid all frontend development just to stay away from CSS.

But, as I’m starting to grow in my career, I’m becoming a member of the first (and smaller) group – the one that loves CSS.

I learned that CSS is quite easy to use when you learn the ✨ basics ✨ correctly and don’t rush into advanced things.

So, if you are still struggling with it, you may need to consider doing some basic training or even practicing by playing some “silly” games like Flexbox Froggy or CSS Diner . Believe me, you’ll learn to center a div!

Once concepts like cascade, specificity, selectors, flex, grid, and so on stop being a mystery to you, you’ll probably be ready to dive into the cool stuff without your mental health suffering along the way.

The first two or three times, I found myself stuck sitting in front of my brand new assigned task that required a transition or an animation, looking at the designs and thinking “How the hell am I going to do that?!” But after working on a few more, I came to realize that it is all about the mental model.

The Mental Model

Developing an animation starts way before you start writing the code. Your first step should always be to observe the result you want and try to find the different behaviors and the HTML + CSS resources needed to achieve it. You’ll probably need to divide and conquer, in order to see everything clearly.

This way, when the “spinning ball” becomes an “svg or div with a rotate transform” and your “dropdown effect” becomes a “container with a height or max-height transition,” you’ll be ready to go! Of course, if you don’t already, you’ll need to find out what you can and cannot do with CSS.

Be sure to take a look at concepts like:

  • transform
  • transition
  • animate
  • keyframes

You’ll need them to do all the fancy things. Once you are aware of what you can do with them, you’ll see that, basically, what you can do is put together a series of transformations, so you’ll have to observe how each individual element of the animation interacts and what transformations it suffers.

It might take a while for it to click in your brain and start seeing things this way. In the meantime, let’s take a look at a few examples developed in the Empathy Platform Docs portal.

Example 1: 404 error

A good example of a simple animation is located in the 404 error. Can you guess what is going on and how this animation works? Don’t worry if you don’t see it immediately!

Here’s how it works:

First comes the HTML:

<div class="edoc-error-page__diagram">   
  <p class="edoc-error-page__text edoc-error-page__text--404">404</p> 
  <p class="edoc-error-page__text edoc-error-page__text--error"> ERROR 	   </p>   
  <Bubble class="edoc-error-page__bubble edoc-error-page__bubble--		   green"/> 
  <Bubble class="edoc-error-page__bubble edoc-error-page__bubble--blue"/> 
  <Bubble class="edoc-error-page__bubble edoc-error-page__bubble--pink"/>   <Bubble class="edoc-error-page__bubble edoc-error-page__bubble--yellow"   />   
  <Bubble class="edoc-error-page__bubble edoc-error-page__bubble--orange" 	/>
</div>

As you can see, in this case, each of the bubbles is an individual element. “Bubble” is an imported SVG, but this could be done with divs as well!

The second part is to define the animation for each of the balls. For this, keyframes come in handy:

@keyframes rotation {   
    from {     
        transform: rotate(0deg);   
    }  
    to {     
        transform: rotate(359deg);   
    } 
}

Assigning the animation with the property ‘animation’ to each bubble makes everything start spinning:

&--blue {   
    top: rem(-10px);   
    left: 38%;   
    animation: rotation 4s infinite linear;   
    circle {     
        r: 20;   
    } 
} 
&--green {   
    top: rem(40px);   
    left: 28%;   
    transform: rotate(45deg);   
    animation: rotation 3.5s infinite reverse linear;   
    circle {     
        r: 18;     
        fill: $color-green;   
    } 
}

But, as you can see, there are a few more things going on here, so let’s check everything:

  • top and left: Each bubble is placed with `absolute` in the picture.
  • animation properties: As you can see different bubbles are assigned different properties. This is done to change the characteristics of the rotation. Playing with times, we can make some of them spin slower and others spin faster. Also, some include `reverse` to rotate them counterclockwise.
  • circle properties: Here, we modify the svg characteristics to give the circles different radii and colors.

Too much to begin with? Maybe an even simpler example could help:

Example 2: Holons' No-Results Page

An even simpler animation is located in the no-results page of the Holons Search Experience. Didn’t see anything? Stare at that sad, disappointed Holon for a few seconds… It blinks! Can you guess how this one works?

Here it goes:

Let’s start with the HTML again:

<div class="no-results__image-wrapper">   
  <NoResultsEyesIcon class="no-results__image no-results__image--eyes"/>
  <NoResultsMouthIcon class="no-results__image no-results__image--mouth"   /> 
</div>

The face is separated in two SVGs, one for the eyes and another for the mouth. This allows us to easily animate the eyes, leaving the mouth alone.

Secondly, we have a keyframes animation for the blink:

@keyframes blink {   
    45%, 55% {     
        transform: scaleY(1);   
    }   
    50% {     
        transform: scaleY(0.1);   
    } 
}

In this case, instead of modifying rotation, we are playing with the vertical scaling. That way, it gets narrowed for a small moment (starting at 45% and finishing at 55%).

Finally, the animation is given to the eyes SVG:

&--eyes {   
    animation-name: blink;   
    animation-duration: 6s;   
    animation-timing-function: ease;   
    animation-iteration-count: infinite; 
}

That said, you’ll probably need to struggle with a few animations before you start to understand their inner-workings quite quickly, so don’t despair! You’ll get there!

Remember: It takes time!

Even if you get to a point where you immediately realize how everything works and how you’ll get to that point, it will take time to implement something beautiful. You’ll probably never be able to create a breathtaking animation in five minutes, it takes time!

It’s very possible that you’ll end up in front of a trade-off between the time you can dedicate to it and how smooth you want the animation to be. Just remember that it is normal, you’re not going to perform a miracle in limited time, so don’t panic and take your time (if you have it)!

Related articles