How to define the name of the keyframe that binds to the selector in CSS?
Last Updated :
06 Jun, 2023
There has been a rise in animated websites these days. Writing and running animations on a web page requires the use of keyframes to set some kind of rules for the frame in which that animation is being performed. While writing the required properties in the keyframes, we basically assign a value that varies from 0% to 100%. The 0% denotes the start of the animation and 100% denotes the finishing. The keywords from and to which specify that from which level to which level we have to run the animation out of 100%.
The name of the keyframe that binds to the selector is defined using the animation-name property. The animation property can also be used to define the name as its first attribute.
Syntax:
element-selector {
animation-name: name;
}
The below examples demonstrate how to specify the name of the keyframe that binds to the selector.
Example 1: Using the animation-name property.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background: #731897;
position: relative;
/* Using the animation-name property
to define the name of the animation */
animation-name: GFG;
animation-duration: 3s;
animation-iteration-count: 5;
}
/* Define the animation to be used */
@keyframes GFG {
0% {
top: 0px;
left: 0px;
background: #731897;
}
25% {
top: 0px;
left: 200px;
background: #E94848;
}
50% {
top: 200px;
left: 200px;
background: #51B43A;
}
75% {
top: 200px;
left: 0px;
background: #484EE9;
}
100% {
top: 0px;
left: 0px;
background: #731897;
}
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
This is animation effect
using @keyframes
</h3>
<div></div>
</body>
</html>
|
Output:
Example 2: Using the animation property.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background: #731897;
position: relative;
/* Using the animation property
to define all the parameters of the
animation */
animation: GFG 3s 5;
}
/* Define the animation to be used */
@keyframes GFG {
0% {
top: 0px;
background: #731897;
width: 200px;
}
100% {
top: 400px;
background: #E94848;
width: 600px;
}
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>
This is animation effect
using @keyframes
</h3>
<div></div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...