An introduction to animation and keyframes in CSS

#css #tutorial #beginners

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>

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%;
}

Which should look like:

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);
    }
}

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.

animation-name: Takes in the name of your created animation.
animation-duration: The amount of time you would like the animation to last in its entirety.
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;
}

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

So our rule can now look like...

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

... 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;
    }
}

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;
}

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!