sagir-tech

Creating a Carousel using Cascading Style Sheet (CSS) Animation and @keyframes rule.

Sagir Garba's photo
Sagir Garba
·

7 min read

Introduction

The introductory section of your web-site is what attracts people to know more about your website, and beautiful animated pictures are great tools for achieving that.

To animate an element, you need to know about the animation properties and the @keyframes rule. The animation controls how the animation should behave and the @keyframes rule controls what happens during the animation.

An animation let's an element gradually change from one style to another. The first thing to do when using CSS animation is to specify some keyframe for the animation. Keyframe is what holds what specify what the element style will be at a certain time. When you specify CSS style inside the @keyframes rule, the animation will gradually change from current style to the new style at a certain time.

Let’s take a look at an example.

/* The element to apply the animation */

P {
                Animation-name: slide;
                Animation-duration: 4s;
                Animation-iteration-count: infinite;
   }

/*The animation code */

@keyframes slide {
                0% { color : red; };
                100% { color : blue };
                         }

The example above will change the color of the p tag from red to blue after 4s.

N.B

  1. The animation-name is used to bind the element to an animation.

  2. The animation-duration is used to define how long an animation should take to complete. If the animation-duration is not specified, no animation will occur, because the default value is 0s (0 second).

  3. The animation-iteration-count is used to specify the number of times an animation should be played. The default value is one (1). while the infinite property will make it play the animation forever.

Moreover, you can also use percentage, by using percent you can add as many style changes as you want.

From the previous example, you can change the color of the p tag as many times as you want.

The example of this is:

@keyframes slide {
                0% {color: red};
                25% {color: blue};
                50% {color: green};
                75% {color: pink};
                100% {color: purple};
}

The example above will change the color of the p tag to blue, green, pink, and purple when the animation is 25% complete, 50% complete, 75% complete, and 100% complete, respectively.

Let’s use what we have learned so far to create a simple image carousel.

Let’s first create an HTML document and add 5 pictures in image folder.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="slide">
        <figure>
            <img src="./image/pic.png">
            <img src="./image/pic2.png">
            <img src="./image/pic.png">
            <img src="./image/pic3.png">
            <img src="./image/pic.png">
        </figure>
    </div>
</body>
</html>

N.B your first and last pictures must be the same.

The next thing is to create CSS and apply animation.

The first thing we need to do here is to reference our figure tag and set animation name and duration.

#slide figure {
            position: relative;
            width: 500%;
            margin: 0;
            left: 0;
            animation-name: slide;
            animation-duration: 20s;
        }

The next thing is to style our images, so that a single image occupies the entire screen.

   a #slide figure img {
            width: 20%;
            float: left;
            animation-name: slide;
            animation-duration: 20s;
        }

Then the next thing is to add @keyframes which will allow us to animate our slider.

@keyframes slider {
            0% {
                left: 0;
            }
            20% {
                left: 0;
            }
            25% {
                left: -100;
            }
            45% {
                left: -100;
            }
            50% {
                left: -200;
            }
            70% {
                left: -200;
            }
            75% {
                left: -300;
            }
            95% {
                left: -300;
            }
            100% {
                left: -400;
            }

        }

In the code above we are telling our slider to display the first image at 0% and at 20%, then at 25% and at 45% the slider should move -100% to the left which will display the second image, then at 50% and 70% the third image will be displayed, at 75% and 95% the fourth slide will be displayed, then at 100% the last slide will be displayed. With the animation set to infinite, the animation is a repeated process.

summary

Carousel is a great tool in beautifying and attracting people to your website. You can create a beautiful one of your choice with just CSS Animation and @keframes rule.

CSS Animation