The CSS @ Keyframe identify the use of animation rule which define that how the element will perform with timeline.
@Keyframe rules are specified with the name and the syntax is :
@keyframes animation_name {
keyframes-selector
{
css-styles;
}
}
Let's understand with the help of an example :
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta charset='utf-8' />
<title>Mindstick Software Private Limited</title>
<style>
h1 {
color: black;
text-align: center;
}
div {
position: relative;
animation: mind 10s infinite;
}
@keyframes mind {
0% {
top: 500px;
width: 0px;
font-size: 10px;
transform: translate(0px) scale(1.4) rotate(80deg);
}
25% {
top: 400px;
background: yellow;
font-size: 20px;
width: 50px;
transform: translate(100px) scale(1.3) rotate(60deg);
}
50% {
top: 300px;
background: orange;
font-size: 30px;
width: 150px;
transform: translate(200px) scale(1.2) rotate(40deg);
}
75% {
top: 200px;
background: pink;
width: 250px;
font-size: 40px;
transform: translate(300px) scale(1.1) rotate(20deg);
}
100% {
top: 100px;
background: red;
font-size: 50px;
width: 500px;
transform: translate(400px) scale(1) rotate(0deg);
}
}
</style>
</head>
<body>
<div>
<h1>Mindstick Software Private Limited</h1>
</div>
</body>
</html>
Hope this will clear your confusion.
Happy Coding!
