Learn CSS animation with one project

CSS animations are used to make websites more enticing, beautiful, and interactive. And today we're going to build a project on it. By the time we're done, you should have a good grasp of CSS animations

CSS animation can be broken into two parts:

Transitions: It provides a way to control the animation speed whenever a CSS property value changes.
Animations: They provide a way for elements to go through different styles over a specified amount of time.

Differences between the two

Transitions	Animations
Transitions are not meant for loops	Animations can loop
Transitions require a trigger	Animations don't need a trigger
Transitions are less flexible	Animations are more flexible

While animations may look like a better version of transitions, they both have their specific use cases.

Before going into our main project, let's quickly look at animations and transitions separately.

Transitions

Let's say you have a button that, once hovered on, you want the button to increase in size and change color from green to lime.

https://codepen.io/adebisi1234/pen/RwqJPyd

You notice that the effect is instant and choppy. This is what transitions solve; they control the animation speed, making it smoother.

Here are all the CSS properties under transitions:

transition-property: Defines the CSS properties The transition should look for changes in, for example, background and width Use theall keyword if you want to watch out for all properties.
transition-duration: defines how long the animation should take
transition-delay: defines the delay before the transition starts
transition-timing-function:defines a function that states how intermediate values for its properties are computed. - mdn

Let's show how it works by making the button defined earlier changes smoother

Setup

Create a folder called CSS Animations. This is where we'll be working throughout.
Create your index.html and styles.css files

The HTML code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Learning css animations</title>
</head>

<body>
    <button class="transition">
        hover me
    </button>
</body>

</html>

This HTML code defines a button element with a class of transition.

The CSS code

codes in comments point out other values its property can have

button {
    text-align: center;
    color: white;
    margin-left: 40%;
    margin-top: 30px;
    padding: 8px 12px;
    transition-property: all /* background, padding, etc */;
    transition-duration: 0.5s /* 250ms, 1s, etc */;
    transition-delay: 0.2ms /* 1s, 250ms, etc */;
    background-color: green;
    transition-timing-function: ease-in /* ease, ease-in, ease-in-out */;
}

button:hover {
    background-color: lime;
    transform: scale(1.5);
}

transition-property: Specifies that the transition should look for changes in all CSS properties of the button
transition-duration: specifies that the transition should last for 0.5s
transition-delay: Specifies the delay before the transition starts
transition-timing-function: specifies a function to define how the transition should move from one value to another. - mdn

There's a shorthand version of all the transition- properties above, so delete all transition- properties and add

/* transition: <property> <duration> <timing-function> <delay>; */
transition: all 0.5s ease-in;

Results

https://codepen.io/adebisi1234/pen/RwqyWEp

Animations

We'll continue with the transition code.

For some reason, we want a box that bounces, rotates, and morphs into a ball. That's what animation is for; instead of checking for changes in CSS properties, it just starts.

How it works

Animations use @keyframe rule to define different CSS styles that take place at different points in time.

The different points in time are defined using percentages. e.g: 0% 50% 100%

You can replace 0% and 100% withfrom and to, respectively.

Here are all the CSS properties under animations:

@keyframes: controls the intermediate steps in a CSS animation sequence by defining different styles for different points in time.
animation-name: defines the name of the keyframe to use for the animation
animation-duration: defines how long the animation should last per cycle
animation-delay: defines the amount of time the delay before the animation starts should last
animation-iteration-count: defines the number of times the animation should repeat
animation-direction: defines the path the animation should take, either forward (0% to 100%), backward (100% to 0%) or alternate (in between)
animation-timing-function: defines how an animation transitions through keyframes by establishing acceleration curves. - mdn
animation-play-state: defines if the animation should pause or not
animation-fill-mode: defines the styles the target should keep before and after it runs.

The HTML code

Add the following code below the button element:

<div class="animation"></div>

This defines the animation element we'll be working on

The CSS code

Add the following to your CSS:

Note: codes in comments point out other values its property can have

.animation {
    width: 50px;
    height: 50px;
    background-color: red;
    position: absolute;
    top: 50%;
    bottom: 50%;
    right: 50%;
    left: 50%;
    transform: translateX(-100%);
    animation-name: rotateAndBounce;
    animation-timing-function: ease-in-out; /* ease, ease-in, ease-out*/
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: both; /*forward, backward, none*/
    animation-iteration-count: infinite; /* 1, 2, 10, etc */
    transform-origin: center;


}

@keyframes rotateAndBounce {
    0% {
        border-radius: 0;
        transform: translateY(0) rotate(0deg) ;
    }

    25% {
        border-radius: 8px;
        transform: translateY(-50px) rotate(90deg) ;
    }
    50% {
        border-radius: 50%;
        transform: translateY(-100px) rotate(180deg) ;
    }
    75% {
        border-radius: 8px;
        transform: translateY(-50px) rotate(270deg) ;
    }
    100%  {
        border-radius: 0;
        transform: translateY(-0) rotate(360deg) ;
    }
}

@keyframes: specifies the styles the animation will go through under the name rotateAndBounce.
animation-name: specifies rotateAndBounce as the keyframe the animation will use.
animation-duration: specifies that the animation should last 1 second.
animation-delay: specifies 1s as the time the animation should wait before starting.
animation-iteration-count: specifies that the animation should repeat infinitely.
animation-timing-function: specifies that the animation should go through the keyframe's styles using the ease-in-out function
animation-fill-mode: specifies that the animation styles should replace the default styles before and after completion.

Shorthand

/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: rotateAndBounce 1s ease-in-out 1s infinite;

Result

https://codepen.io/adebisi1234/pen/OJaZyKQ

Main Project

Since both animation and transitions have been explained, let's get to work

The HTML code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Project</title>
</head>

<body>
    <aside class="sidebar">
        This is a sidebar
        <button>Hover to show sidebar</button>
    </aside>
    <main class="main">
        <h1 class="slide">Welcome</h1>
        <p class="loading">Loading </p>
        <p class="loading"> please wait <span class="bounce">•••</span> </p>

        <p class="content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat quod, velit placeat incidunt natus ea nisi
            maxime ex mollitia, obcaecati perferendis ullam consectetur? Illum?Lorem ipsum dolor sit amet consectetur
            adipisicing elit. Velit laborum error omnis consequatur dolore recusandae magnam reiciendis pariatur sint
            dolor quasi quisquam perferendis, temporibus nemo quas, harum modi dolorem nulla?
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid vel possimus assumenda iure. Sunt dolorum
            nisi qui corporis exercitationem, esse soluta! Eos, quae nesciunt? Sint quasi nemo optio rerum aspernatur.
        </p>
        <div class="long-text"> <b><em>hover to see full content.</em> </b> <br> consectetur adipisicing elit. Dolor
            eius aut
            earum,
            similique
            ipsum ad culpa nihil. Nesciunt nisi quam consequatur molestias quibusdam animi, labore repellat commodi nam
            sunt ipsa.</div>

    </main>
</body>

</html>

The HTML code defines the following:

A sidebar, which we'll use transitions to toggle whether it should show in the document or not
An h1, which we'll use animation to slide into the document
Some p tags to show while the main content is loading, we'll use animation to fade them out once the main content is loaded
the main content, which we'll use transitions to slide into the document
an aside that's displayed when hovered on, we'll use transition for this

The CSS code

body {
    display: flex;
    padding: 0;
    margin: 0;
    height: 100vh;
}

body > * {
    flex-grow: 0;
}

.sidebar {
    width: 350px;
    display: flex;
    justify-content: space-between;
    transform: translateX(calc(-100% + 100px));
    transition: all ease 500ms;
}

.sidebar:hover {
    transform: translateX(0);
}

.sidebar > button {
    width: 100px;
    background-color: brown;
    height: fit-content;
    padding: 12px 12px;
}


.main {
    position: relative;
    width: 100%;
}

.bounce {
    animation: bounce 1s ease-in-out infinite;
    width: fit-content;
    display: inline-block;
}
.slide {
    animation: slide 3s ease-in-out 1;
}

.content {
  animation: slideIn 3s;
}

.loading {
    animation: loaded 3s ease 1 50ms forwards;
}

.long-text {
    width: 100px;
    height: 100px;
    background-color: brown;
    overflow: hidden;
    transition: all 3s ease-in;
    text-overflow: ellipsis;
}
.long-text:hover {
    width: 100%;
    background-color: green;
    height: 200px;

}

@keyframes loaded {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        width: 0;
        height: 0;
        margin: 0;
    }
}

@keyframes bounce {
    from {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px);
    }
    to {
        transform: translateY(0) rotate(360deg);
    }

}
@keyframes slide {
    0% {
        opacity: 0.1;
        transform: translateX(-100%);
    }

    50% {
        opacity: 0.5;
        transform: translateX(-50%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideIn {
  from {
    margin-left: 100%;
    width: 200%;
  }

  75% {
    font-size: 300%;
    margin-left: 25%;
    width: 150%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Before I explain what the CSS does, try to see if you can figure out what it does.

Keyframes

Loaded This changes the opacity of the paragraphs with loading class to 0, making them invisible
BounceThis makes the loading icon bounce and rotate.
Slide This is used to slide in the main h1
slideIn This is used to slide in the main content

Transitions

.sidebar:hover The transition here slows down the change from translateX(calc(-100% + 100px)) to translateX(0). Making it smoother
.long-text:hoverThe transition here slows down the change in the element's width,height, andbackground-color.

And with this, we have our simple and cool product.

Result

https://codepen.io/adebisi1234/pen/XWyqXWW

Conclusion

With this project, I believe you've gotten a good grasp on CSS animations.

Now go out there and build amazing projects :)

Learn CSS animation with one project

CSS animations bring life to a website. Let's build a simple project on it to showcase how it works

Table of contents

CSS animation can be broken into two parts:

Differences between the two

Transitions

Animations

Main Project

Conclusion