How To Use Keyframe Animation In CSS

Through CSS3, we can create animation, which can replace animated pictures, flash animation, and JavaScript on many web pages. What you need to do is to define the animation rule using the @keyframes keyword with a given name, and then assign the animation to an Html element’s animationName CSS style attribute. This article will tell you how to do it with examples.

Table of Contents

1. How To Create @keyframes Rule.

It is very easy to create a @keyframes rule, what you need to do is add the keyframes rule definition code in your web page style section. Below is the syntax.
```
@keyframes <animation-rule-name> {

    animation steps.
     
}
```

Below is a CSS keyframes rule definition example. It defines 3 keyframes rules, the first keyframes rule’s name is changeColor, and the second keyframes rule’s name is changeMultipleColors, the third keyframes rule’s name is changeMultipleColorsAndMoving

<style>


@keyframes changeColor {

    from {background-color: red;}

    to {background-color: greenyellow;}
     
}

@keyframes changeMultipleColors {

    0%   {background-color: red;}

    25%  {background-color: green;}

    50%  {background-color: blue;}

    100% {background-color: yellow;}
 
}

@keyframes changeMultipleColorsAndMoving {

    0%   {background-color: blue; left: 0px; top: 0px}

    25%  {background-color: green; left: 300px; top: 0px}

    50%  {background-color: red; left: 300px; top: 200px}

    75% {background-color: yellow; left: 0px; top: 200px}

    100% {background-color: darkorange; left: 0px; top: 0px}

}

</style>

The changeColor keyframes-rule-defined animation will change the background color from red to greenyellow.
The changeMultipleColors keyframes rule defined animation will change the background color according to the animation duration percentage.

The changeMultipleColorsAndMoving rule-defined animation will change the background color and move the Html element by specifying the element’s top, left point coordinates value.

2. How To Assign The @Keyframes Rules To Html Element.

If you want an Html element such as a <div> tag to run the defined animation, you can assign the defined @keyframes rule’s name to the <div> tag CSS animation-name attribute like below.
But at the same time, you must set another CSS attribute animation-duration to a time duration such as 10s, the time unit is second, if you do not set this, the animation will not take effect because the default animation-duration value is 0s which means no animation.

Below is an example, it defines a CSS class with the name square. And the class defines the animation-name and animation-duration CSS attribute values.

<style>

.square{

    width: 100px;

    height: 100px;

    display: block;

    margin-bottom: 10px;

    /* if not set the below attribute, then you can not move the div square by configure it's left & top css attribute values. */
    position: relative;

    animation-name: changeMultipleColorsAndMoving;

    animation-duration: 10s;
}

@keyframes changeMultipleColorsAndMoving {

    0%   {background-color: blue; left: 0px; top: 0px}

    25%  {background-color: green; left: 300px; top: 0px}

    50%  {background-color: red; left: 300px; top: 200px}

    75% {background-color: yellow; left: 0px; top: 200px}

    100% {background-color: darkorange; left: 0px; top: 0px}

}
</style>

And then you can assign the above CSS class to an Html <div> tag, then it will run the animation on the <div> tag.
```
<div class="square" id="div1">
    
</div>
```

The above animation will move the <div> element on the web page, so you should define the position attribute value in the CSS class definition. Otherwise, the animation will not take effect. In this example, the position attribute’s value is relative, that means the <div> element’s position is relative to the nearest element above it.

.square{

    width: 100px;

    height: 100px;

    display: block;

    margin-bottom: 10px;

    /* if not set the below attribute, then you can not move the div square by configure it's left & top css attribute values. */
    position: relative;

    animation-name: changeMultipleColorsAndMoving;

    animation-duration: 10s;
}

You can also assign the @keframes rule to the Html element in the javascript source code like below. Please note the animation-name should be changed to animationName, animation-duration should be changed to animationDuration.
```
var div1 = document.getElementById('div1');

div1.style.animationName = 'changeMultipleColorsAndMoving';
    
div1.style.animationDuration = '5s';
```

3. How To Use Keyframe Animation In CSS Example.

This example contains only one Html source file how-to-use-keyframe-animation-in-css.html.
When you browse it in a web browser, it will first run an animation that will change the <div> element background color while moving it. This is implemented in pure CSS code.

There are also 3 buttons, when you click each button it will animate the <div> tag with different animation effects.

Below is the source code of the file how-to-use-keyframe-animation-in-css.html.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How To Use Keyframe Animation In CSS Example</title>
<style>

.square{

    width: 100px;

    height: 100px;

    display: block;

    margin-bottom: 10px;

    /* if not set the below attribute, then you can not move the div square by configure it's left & top css attribute values. */
    position: relative;

    animation-name: changeMultipleColorsAndMoving;

    animation-duration: 10s;
}

@keyframes changeColor {

    from {background-color: red;}

    to {background-color: greenyellow;}
     
}

@keyframes changeMultipleColors {

    0%   {background-color: red;}

    25%  {background-color: green;}

    50%  {background-color: blue;}

    100% {background-color: yellow;}
 
}

@keyframes changeMultipleColorsAndMoving {

    0%   {background-color: blue; left: 0px; top: 0px}

    25%  {background-color: green; left: 300px; top: 0px}

    50%  {background-color: red; left: 300px; top: 200px}

    75% {background-color: yellow; left: 0px; top: 200px}

    100% {background-color: darkorange; left: 0px; top: 0px}

}
</style>

<script type="text/javascript">

function init(){

    var div1 = document.getElementById('div1');

    div1.style.backgroundColor = 'red';
}

function changeColor(){

    var div1 = document.getElementById('div1');

    div1.style.animationName = 'changeColor';
    div1.style.animationDuration = '5s';
}


function changeMultipleColors(){

    var div1 = document.getElementById('div1');

    div1.style.animationName = 'changeMultipleColors';
    div1.style.animationDuration = '5s';

}

function changeMultipleColorsAndMoving(){

    var div1 = document.getElementById('div1');

    div1.style.animationName = 'changeMultipleColorsAndMoving';
    div1.style.animationDuration = '5s';

}



</script>
</head>
<body onload="init()">
<h3>How To Use Keyframe Animation In CSS Example.</h3>

<div class="square" id="div1">
    
</div>

<input type="button" value="Change Color" onclick="changeColor()" />
<input type="button" value="Change Multiple Colors" onclick="changeMultipleColors()" />
<input type="button" value="Change Color & Moving" onclick="changeMultipleColorsAndMoving()" />

</body>
</html>

You can see this example demo video on the URL https://youtu.be/lY9OoQhjJzI.

1. How To Create @keyframes Rule.

2. How To Assign The @Keyframes Rules To Html Element.

3. How To Use Keyframe Animation In CSS Example.

Leave a Comment Cancel Reply