DEV Community

Cover image for An introduction to animation and keyframes in CSS
EidorianAvi
EidorianAvi

Posted on

An introduction to animation and keyframes in CSS

A topic I've recently caught interest in is how to animate things through the use of CSS. It's not something I'm entirely unfamiliar with I've used it in previous projects but it's something I was hesitant to use thinking they'd be so much more difficult to do than they actually were. Go figure.

Today I'd like to break down how to build out your own personal(basic) animations using CSS.

A Quick Setup

I'll be playing with two basic shapes a square and a circle. All I have in my project is an index.html file as well as a styles.css file and I of course linked the stylesheet to the index.

The body of my HTML looks like:

<body>
    <div class="blue-box"></div>
    <div class="red-circle"></div>
</body>
Enter fullscreen mode Exit fullscreen mode

And my styles sheet looks like:

body {
    margin: auto;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.blue-box {
    height: 200px;
    width: 200px;
    background-color: blue;
}


.red-circle {
    height: 200px;
    width: 200px;
    background-color: red;
    border-radius: 50%;
}
Enter fullscreen mode Exit fullscreen mode

Which should look like:
Alt Text

We're all set to start playing with some animations.

Keyframes

What are keyframes you ask? Well they're the CSS rule we use to assign how an animation will proceed at specific keyframes(think checkpoints) in its sequence. The directions of the animation if you will.

To build out a keyframe animation in your CSS file you use the @keyframes at-rule and then assign it a name. This will be the name you call later so it should be self-descriptive.

From there you can assign it a to and from value in terms of what you're animation should be doing. For more control(and my personal preference) you can also use multiple percentages in place of.

Example:

@keyframes rotate {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Percentage Version */

@keyframes rotate {
    0% {
        transform: rotate(0);
    }

    50% {
        transform: rotate(180deg)

    100% {
        transform: rotate(180deg);
    }
}
Enter fullscreen mode Exit fullscreen mode

Notice how in the percentage version I can specify where I want the animation to be at its 50% keyframe, or any keyframe for that matter. Much more control. If it's a two step animation by all means use from and to but for more customized animations percentage is the way to go.

Using the Animations

So now that you created a keyframe animation that will rotate whatever you assign it to a full 360 degrees let's check out how you would implement it.

There are multiple properties you can work with with animations but I will be going over the main three I've run into.

  1. animation-name: Takes in the name of your created animation.

  2. animation-duration: The amount of time you would like the animation to last in its entirety.

  3. animation-iteration-count: The amount of times you would like the animation to repeat itself.

Let's check out how this might look on our blue box:

.blue-box {
    height: 200px;
    width: 200px;
    background-color: blue;
    animation-name: rotate;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
Enter fullscreen mode Exit fullscreen mode

If you're following along you'll notice the box is now rotating infinitely and it takes 5 seconds to make the full 360 rotation animation.

There's also this nifty little shorthand in the form of:

animation: name duration timing-function
Enter fullscreen mode Exit fullscreen mode

So our rule can now look like...

.blue-box {
    height: 200px;
    width: 200px;
    background-color: blue;
    animation: rotate 5s infinite;
}
Enter fullscreen mode Exit fullscreen mode

... and work just the same!

A Couple More Animations

Okay so now that we have an idea as to how make and use a keyframe animation let's check out a couple more quick ones.

@keyframes color-changer {
    0% {
        background-color: red;
    }

    50% {
        background-color: green;
    }

    100% {
        background-color: blue;
    }
}

@keyframes pulsate {
    0% {
        width: 200px;
        height: 200px;
    }

    50% {
        width: 250px;
        height: 250px;
    }

    100% {
        width: 200px;
        height: 200px;
    }
}
Enter fullscreen mode Exit fullscreen mode

Again these names are supposed to be descriptive as to what they perform. The first will cycle through RGB and the second will make the element pulsate.

I made two to show you how you could use both on a single element. This time I will be working with the red circle.

.red-circle {
    height: 200px;
    width: 200px;
    background-color: red;
    border-radius: 50%;
    animation: pulsate 5s infinite, color-changer 10s 2;
}
Enter fullscreen mode Exit fullscreen mode

I used the shorthand method to show that you can call on both animations on the same element and specify different rule sets for each animation.

The red circle will now pulsate at the rate of 5 seconds per pulse infinitely. It will also change colors at the rate of 10 seconds per rotation but it will only occur twice. It will continue pulsating red after the color-changer animation is done running.

Go Animate!

That'll be it from me today on keyframes and animations. I know for a fact that there are some insanely creative and talented people out there who can work magic with this tool, and I'm sure you can do so much more than the basic stuff I showcased today. I do hope you either learned something new today or just enjoyed the read. Always open to feedback and discussion but until next time... happy coding!

Discussion (2)

Collapse
arvindsridharan profile image
arvindsridharan

This is awesome post. Have you tried w3 css. It is good.

Collapse
eidorianavi profile image
EidorianAvi Author

Yes I definitely reference W3 quite often! Excellent resource.