How to create infinite animations in CSS3

In this tutorial I will speak about CSS3. As you might know, in CSS3 you have the posibility to create animations. And in this tutorial I will show how you can easily create your animations.

I have created a simple HTML file with css code:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#animation{
width: 200px;
height: 200px;
-webkit-animation: new 5s infinite;
animation: new 5s infinite;
}
@-webkit-keyframes new{
0% {background: green}
25% {background: yellow}
50% {background: red}
75% {background: blue}
100% {background: blueviolet}
}
</style>
</head>
<body>
<div id="animation"></div>
</body>
</html>

<div id="animation"></div> will change the color 5 times in 5 seconds.

animation is a css3 tag that allows to create animations.

keyframes works as a function and in my keyframes I will change 5 times the color of the box.

Infinite is a css3 tag that will repeat the animations.

Video Tutorial:









Leave a Comment