@keyframes Rule in CSS
What is @keyframe Rule?
The CSS @keyframe indicates the movement decide that characterizes the CSS properties for the components at each state with a course of events.
We can make complex activity properties by utilizing the @keyframe. A movement is made with the inconsistent CSS styles that can be rehashed uncertainly or a limited number of times. A basic liveliness can simply have two keyframes, while the perplexing activity has a few keyframes.
At the point when you indicate CSS styles inside the @keyframes rule, the activity will continuously transform from the current style to the recent fad at specific occasions.
Synatax of @keyframe
@keyframes animationname
{
keyframes-selector {css-styles;}}
Values present in @keyframe syntax
animationname
Required. Characterizes the name of the liveliness.
keyframes-selector
Required. Level of the liveliness length.
Lawful qualities:
0-100%
from (same as 0%)
to (same as 100%)
Note: You can have numerous keyframes-selectors in a single liveliness.
css-styles
Required. At least one legal CSS style properties.
To get a liveliness to work, you should tie the activity to a component.
Browser Support for @keyframe
| Property | Google Chrome | Internet Explorer | Mozilla Firefox | Netscape Navigator |
|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- | 10.0 | 16.0 5.0 -moz- | 9.0 4.0 -webkit- |
How you can animate by Changing Color, Height and width?
The example ties the "model" activity to the <div> component. The activity will keep going for 4 seconds, and it will progressively change the foundation shade of the <div> component from "red" to "green" and the width and height will change in example 1.
Example 1: Changing Color, Height and width
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
from {background-color: red; width:100px; height:100px;}
to {background-color: green; width:150px; height:150px; }
}
</style>
</head>
<body>
<!-- We directly styled for div element, we don't use class to style the element. -->
<div></div>
</body></html> {codeBox}
{getButton} $text={Try Live} $color={#0091EA}
When an animation is finished, it changes back to its original style.
Note: The animation-duration property characterizes what amount of time a liveliness should require to finish. On the off chance that the movement span property isn't determined, no activity will happen, on the grounds that the default esteem is 0s (0 seconds). {alertInfo}
Animating by using from and to attribute
In the model above we have determined when the style will change by utilizing the catchphrases "from" and "to" (which addresses 0% (start) and 100% (complete)).
It is likewise conceivable to utilize percent. By utilizing percent, you can add as many style changes as you like.
The accompanying model will change the foundation shade of the <div> component when the activity is 25% finished, half complete, and again when the movement is 100% finished. As we showed in below example.
Example 2: Animating by using from and to attribute
<!DOCTYPE html>
<html>
<head>
<style>div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color: red;}
25% {background-color: green ;}
50% {background-color: teal;}
100% {background-color: black;}
}
</style>
</head><body>
<div></div>
</body></html> {codeBox}
{getButton} $text={Try Live} $color={#0091EA}
Animating by changing color and positioning in @keyframe
The example or accompanying model will change both the background-color and the position of the <div> component when the movement is 25% finished, half complete, and again when the activity is 100% finished. You can see in below example.
Example 3: Animating by changing color and positioning in @keyframe
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example3;
animation-duration: 4s;
}
@keyframes example3 {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:green; left:200px; top:0px;}
50% {background-color:teal; left:200px; top:200px;}
75% {background-color:black; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html> {codeBox}
{getButton} $text={Try Live} $color={#0091EA}
Post a Comment