CSS @keyframes rule
CSS is all about presentation. Discover how CSS @keyframes rule works to transform plain HTML into a premium user experience in the guide below.
The CSS @keyframe rule defines the animation properties for elements at different points in time within a timeline.
We have the ability to generate intricate animation characteristics through the @keyframe rule. An animation is formed by altering CSS styles that can repeat endlessly or for a specific number of iterations. A basic animation may consist of merely two keyframes, whereas a more intricate animation involves multiple keyframes.
Syntax
@keyframes animation-name {keyframes-selector {css-styles;}}
To utilize keyframes, it is necessary to generate a @keyframes directive in conjunction with the animation-name attribute to associate an animation with its keyframe definition.
It receives three values. Now, we will delve into each of them extensively.
Property values
The animation-name property is essential as it specifies the name of the animation to be used.
The keyframes-selector defines the position within the animation timeline where the keyframe takes effect. Its value ranges from 0% to 100%, equivalent to (similar to 0%) and (similar to 100%). These percentages for keyframes can be arranged in any sequence as they will be processed in the order of their occurrence.
CSS styles: It specifies one or multiple CSS style attributes.
If the keyframe declaration omits defining the initial and final animation states, browsers will default to the current styles of the element. Any properties that are not animatable within the keyframes will be disregarded.
Keyframes timing function
To manage the speed of the animation, we have the option to utilize the values listed below.
linear: This implies that the rate of transition remains consistent throughout the entire process.
Ease refers to a gradual acceleration at the beginning of an animation, followed by a period of increased speed, and ultimately a deceleration towards the end.
It is akin to ease, however, the animation concludes swiftly.
It is akin to ease, however, in ease-out, the animation initiates rapidly.
Let's explore the CSS @keyframes rule with visual examples.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:200px;
height:200px;
animation:demo 5s ease-in infinite, trans 5s ease-in-out infinite;
border-radius:40px;
}
@keyframes demo
{
0% {background:red;}
50% {background:yellow; width:100px; height:100px;}
100% {background:green; width:300px; height:300px;}
}
@keyframes trans
{
0% {transform:translate(0px) scale(1.4) rotate(80deg);}
50% {transform:translate(250px) scale(1.2) rotate(40deg);}
100% {transform:translate(350px) scale(1) rotate(0deg);}
}
</style>
</head>
<body>
<div></div>
<p>After the completion of the Animation, the element retracts to its original State </p>
</body>
</html>
Example2
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: black;
text-align: center;
}
div {
position: relative;
animation: jtp 7s infinite;
}
@keyframes jtp {
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>C# Tutorial</h1>
</div>
</body>
</html>
Points to remember
Some of the importanC# Tutorials about this rule are given as follows:
- We can use from keyword instead of using 0% .
- We can use to keyword instead of using 100% .
- Even if we are using from and to keywords, any values between them will still be declared in %.
- For the valid animation, the starting and ending time must be declared.
- Those declarations get ignored that involves the !important
