Dremendo Tag Line
CSS Tutorial

CSS Animation

All About Effects

In this lesson, we will learn about the CSS animation property and how to apply it on HTML elements.

Introduction to CSS Animation

The CSS animation is a way to make elements like images, text, or buttons move, change size, or transform in various ways, making your web content more engaging and dynamic. It enables you to create visually appealing and interactive effects without the need for complex JavaScript programming.

To create CSS animations, you need to understand two key components: @keyframes and the animation property.

video-poster

@keyframes

In CSS, @keyframes is a rule that defines a set of instructions for creating animations. It lets you describe how an element should change over time, from one set of CSS styles to another. Keyframes are used in conjunction with the animation property to control the animation's behavior.

Here is the basic syntax of the @keyframes rule:

Syntax 
@keyframes animation-name {
  0% {
    /* Initial CSS properties */
  }
  100% {
    /* Final CSS properties */
  }
}
  • animation-name is a unique name for your animation.
  • 0% and 100% represent the start and end of the animation, respectively.

You can also use from and to keywords within the @keyframes rule to specify the starting and ending points of the animation. Here's the basic syntax:

Syntax 
@keyframes animation-name {
  from {
    /* Initial CSS properties */
  }
  to {
    /* Final CSS properties */
  }
}
  • from represents the 0% keyframe, defining the initial state of the animation.
  • to represents the 100% keyframe, defining the final state of the animation.

Within each percentage or keyword block, you define the CSS properties you want to animate.

Example 
@keyframes slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

In the above example, we define a keyframe animation called slide that moves an element horizontally from its initial position to 200 pixels to the right.

The animation Property

The CSS animation property is used to apply the animation to an HTML element. It include several properties and they are:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

animation-name

The animation-name property specifies the name of the keyframe animation you want to use.

Example 
@keyframes colorChange {
    from {
        background-color: red;
    }
    50% {
        background-color: darkviolet;
    }
    to {
        background-color: yellow;
    }
}

.color-change {
    animation-name: colorChange;
}

animation-duration

In animation-duration property, you define the amount of time it takes for a CSS animation to complete. In simpler terms, it determines how fast or slow the animation effect happens.

You can specify the duration in seconds (s) or milliseconds (ms) using a numerical value. For instance, 0.5s means half a second, and 1000ms means one second.

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS animation Example</title>

    <!-- Internal CSS -->
    <style>
        .element {
            width: 80px;
            height: 80px;
            margin-left: 50px;
            background-color: #60CA00;
            font-size: 80px;
            text-align: center;
            line-height: 80px;
        }

        @keyframes colorChange {
            from {
                background-color: red;
            }
            50% {
                background-color: darkviolet;
            }
            to {
                background-color: yellow;
            }
        }

        .color-change {
            animation-name: colorChange;
            animation-duration: 5s;
        }
    </style>
</head>

<body>
    <div class="element color-change">A</div>
</body>

</html>

animation-timing-function

This property allows you to specify a timing function, which is essentially a mathematical function that defines the pace or rhythm of the animation over time. There are several predefined timing functions you can use, each with its unique effect. The timing functions are:

  • ease: This is the default and most commonly used timing function. It starts slow, speeds up in the middle, and slows down again at the end, creating a smooth and natural effect.
  • linear: This timing function makes the transition progress at a constant speed from start to finish, creating a steady and uniform change.
  • ease-in: The transition starts slow and gradually speeds up, making it appear to "ease into" the final state.
  • ease-out: The transition starts at a regular pace and then slows down at the end, creating an "easing out" effect.
  • ease-in-out: This timing function combines the ease-in and ease-out effects, starting slow, speeding up, and then slowing down at the end.
  • cubic-bezier(x1, y1, x2, y2): This timing function is used for creating custom timing functions for transitions and animations. It takes four values x1, y1, x2, y2 and each value must be within the range of 0 to 1.
Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS animation Example</title>

    <!-- Internal CSS -->
    <style>
        .element {
            width: 80px;
            height: 80px;
            margin-left: 50px;
            background-color: #60CA00;
            font-size: 80px;
            text-align: center;
            line-height: 80px;
            position: relative;
        }

        @keyframes slideRight {
            from {
                left: 0px;
            }
            to {
            	left: 300px;
            }
        }

        .slide-right {
            animation-name: slideRight;
            animation-duration: 5s;
            animation-timing-function: ease;
        }
    </style>
</head>

<body>
    <div class="element slide-right">A</div>
</body>

</html>

animation-delay

The animation-delay property adds a delay in seconds (s) or milliseconds (ms) before the animation starts.

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS animation Example</title>

    <!-- Internal CSS -->
    <style>
        .element {
            width: 80px;
            height: 80px;
            margin-left: 50px;
            background-color: #60CA00;
            font-size: 80px;
            text-align: center;
            line-height: 80px;
            position: relative;
        }

        @keyframes moveSquare {
            from {
                left: 0px;
                top: 0px;
            }
            25% {
                left: 150px;
                top: 0px;
            }
            50% {
            	left: 150px;
                top: 150px;
            }
            75% {
                left: 0px;
                top: 150px;
            }
            to {
            	left: 0px;
            	top: 0px;
            }
        }

        .move-square {
            animation-name: moveSquare;
            animation-duration: 5s;
            animation-timing-function: ease-out;
            animation-delay: 2s;
        }
    </style>
</head>

<body>
    <div class="element move-square">A</div>
</body>

</html>

animation-iteration-count

The animation-iteration-count property specifies how many times the animation should repeat. It takes an integer value (like 2, 3, 5). You can use infinite for continuous looping.

Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS animation Example</title>

    <!-- Internal CSS -->
    <style>
        .element {
            width: 80px;
            height: 80px;
            margin-left: 50px;
            background-color: #60CA00;
            font-size: 80px;
            text-align: center;
            line-height: 80px;
        }

        @keyframes rotateVertical {
            from {
                transform: perspective(200px) rotateX(0deg);
            }
            to {
                transform: perspective(200px) rotateX(180deg);
            }
        }

        .rotate-vertical {
            animation-name: rotateVertical;
            animation-duration: 3s;
            animation-timing-function: ease-out;
            animation-delay: 2s;
            animation-iteration-count: infinite;
        }
    </style>
</head>

<body>
    <div class="element rotate-vertical">A</div>
</body>

</html>

animation-direction

The animation-direction property in CSS is used to control the direction of a CSS animation. It specifies whether the animation runs in the normal direction, in reverse, or alternates between both directions. There are four possible values for the animation-direction property and they are:

  • normal: This is the default value of animation-direction property which makes the animation run in its natural direction, from the first keyframe to the last keyframe.
  • reverse: This value makes the animation runs in the reverse direction, meaning it starts from the last keyframe and goes to the first keyframe. This can create the effect of reversing the animation.
  • alternate: This value makes the animation runs in a cycle, going from the first keyframe to the last keyframe and then back to the first. It alternates between normal and reverse on each iteration.
  • alternate-reverse: This value combines the alternate and reverse behaviors. It starts with a reverse animation and alternates between normal and reverse on each iteration.
Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS animation Example</title>

    <!-- Internal CSS -->
    <style>
        .element {
            width: 80px;
            height: 80px;
            margin-left: 50px;
            background-color: #60CA00;
            font-size: 80px;
            text-align: center;
            line-height: 80px;
        }

        @keyframes rotateVertical {
            from {
                transform: perspective(200px) rotateY(0deg);
            }
            to {
                transform: perspective(200px) rotateY(180deg);
            }
        }

        .rotate-vertical {
            animation-name: rotateVertical;
            animation-duration: 3s;
            animation-timing-function: ease-out;
            animation-delay: 2s;
            animation-iteration-count: infinite;
            animation-direction: normal;
        }
    </style>
</head>

<body>
    <div class="element rotate-vertical">K</div>
</body>

</html>

animation-fill-mode

The animation-fill-mode property in CSS is used to determine how the styles are applied to an element before and after the animation. It controls whether the element retains its initial styles or takes on the styles of the first or last keyframe or both before and after the animation plays. There are four possible values for animation-fill-mode and they are:

  • none: This is the default value. It means that the element does not retain any styles from the animation, and it reverts to its original state immediately after the animation finishes.
  • forwards: With this value, the element retains the styles of the final keyframe (100%) even after the animation has ended. In other words, the styles at the end of the animation are applied and remain in effect.
  • backwards: This value causes the element to take on the styles of the first keyframe (0%) as soon as the animation is applied, even before the animation begins. This is particularly useful when there is a delay before the animation starts, as it ensures that the initial styles match the starting keyframe.
  • both: If you use this value, the element retains the styles of both the first keyframe before the animation begins and the final keyframe after the animation ends. It combines the behavior of both forwards and backwards.
Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS animation Example</title>

    <!-- Internal CSS -->
    <style>
        .element {
            width: 80px;
            height: 80px;
            margin-left: 50px;
            background-color: #60CA00;
            font-size: 80px;
            text-align: center;
            line-height: 80px;
            position: relative;
            left: 100px;
        }

        @keyframes slideRight {
            from {
                left: 0;
            }
            to {
                left: 300px;
            }
        }

        .slide-right {
            animation-name: slideRight;
            animation-duration: 3s;
            animation-timing-function: ease-out;
            animation-delay: 2s;
            animation-fill-mode: none;
        }
    </style>
</head>

<body>
    <div class="element slide-right">K</div>
</body>

</html>

animation-play-state

The animation-play-state property in CSS is used to control the playback state of a CSS animation. It allows you to pause and resume an animation dynamically through your CSS or JavaScript. There are two possible values for animation-play-state and they are:

  • running: This value indicates that the animation is playing or running as usual. If you don't specify the animation-play-state property, the animation is automatically in the running state.
  • paused: This value indicates that the animation is stopped and does not progress. It effectively freezes the animation at its current position until you change the state back to running.
Example 
<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS animation Example</title>

    <!-- Internal CSS -->
    <style>
        .element {
            width: 80px;
            height: 80px;
            margin-left: 50px;
            background-color: #60CA00;
            font-size: 80px;
            text-align: center;
            line-height: 80px;
            margin-bottom: 20px;
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            50% {
                transform: perspective(200px) rotateX(180deg);
            }
            70% {
                transform: rotate(-360deg);
            }
        }

        .spin {
            animation-name: spin;
            animation-duration: 5s;
            animation-timing-function: ease-out;
            animation-delay: 1s;
            animation-iteration-count: infinite;
            animation-play-state: running;
        }
    </style>
</head>

<body>
    <div class="element spin">K</div>
</body>

</html>

Some Animation Examples

Let's see how to create a bounce and a shake animation using @keyframes and animation properties.

Bounce Animation Example

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS bounce animation Example</title>

    <!-- Internal CSS -->
    <style>
        .element {
            font-size: 32px;
        }

        @keyframes bounce {
            from,
            20%,
            53%,
            to {
                animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                transform: translate3d(0, 0, 0);
            }

            40%,
            43% {
                animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                transform: translate3d(0, -50px, 0) scaleY(1.1);
            }

            70% {
                animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
                transform: translate3d(0, -25px, 0) scaleY(1.05);
            }

            80% {
                animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
                transform: translate3d(0, 0, 0) scaleY(0.95);
            }

            90% {
                transform: translate3d(0, -15px, 0) scaleY(1.02);
            }
        }

        .bounce {
            animation-name: bounce;
            animation-duration: 2s;
            animation-delay: 1s;
        }
    </style>
</head>

<body>
    <p class="element bounce">Hello CSS</p>
</body>

</html>

In the example above, (from, 20%, 53%, to) represent keyframes that specify the style of an element at various points in the animation's timeline.

Shake Animation Example

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS shake animation Example</title>

    <!-- Internal CSS -->
    <style>
        .element {
            font-size: 32px;
        }

        @keyframes shake {
            from,
            to {
                transform: translate3d(0, 0, 0);
            }

            10%,
            30%,
            50%,
            70%,
            90% {
                transform: translate3d(-10px, 0, 0);
            }

            20%,
            40%,
            60%,
            80% {
                transform: translate3d(10px, 0, 0);
            }
        }

        .shake-animation {
            animation-name: shake;
            animation-duration: 1s;
            animation-delay: 1s;
        }
    </style>
</head>

<body>
    <p class="element shake-animation">Hello CSS</p>
</body>

</html>

Previous Next
Dremendo

For over a decade, Dremendo has been recognized for providing quality education. We proudly introduce our newly open online learning platform, which offers free access to popular computer courses.

Our Courses
News Updates
© 2024 Dremendo. All Rights Reserved.