The @keyframes CSS at-rule controls the middle strides in an extremely CSS movement grouping by measure plans for keyframes (or waypoints) on the liveliness arrangement. this offers a ton of the executives over the middle strides of the activity arrangement than changes.
Depiction
JavaScript can get to the @keyframes at-rule with the CSS object model interface CSSKeyframesRule.
To utilize keyframes, make a @keyframes decide with a name that is then utilized by the movement name property to coordinate with an activity to its keyframe assertion. Each @keyframes rule contains a style rundown of keyframe selectors, which determine rates along with the movement when the keyframe happens, and a square containing the styles for that keyframe.
You can list the keyframe rates in any request; they will be taken care of in the request they ought to happen.
Substantial Keyframe records
In the event that a keyframe rule doesn’t indicate the beginning or end conditions of the movement (that is, 0%/from and 100%/to), programs will utilize the component’s current styles for the beginning/end states. This can be utilized to energize a component from its underlying state and back.
Properties that can’t be enlivened in keyframe rules are disregarded, however, upheld properties will, in any case, be energized.
Settling Copies
In the event that various keyframe sets exist for a given name, the last one experienced by the parser is utilized. @keyframes rules don’t course, so liveliness never gets keyframes from more than one guideline set.
On the off chance that a given liveliness time counterbalance is copied, all keyframes in the @keyframes decide for that rate are utilized for that edge. There is falling inside a @keyframes rule if different keyframes indicate a similar rate esteems.
Definition and Usage
The @keyframes rule determines the movement code.
The activity is made by bit-by-bit changing starting with one bunch of CSS styles then onto the next.
During the activity, you can change the arrangement of CSS styles ordinarily.
Indicate when the style change will occur in percent, or with the watchwords “from” and “to”, which is equivalent to 0% and 100%. 0% is the start of the movement, 100% is the point at which the liveliness is finished.
Tip: For best program support, you ought to consistently characterize both the 0% and the 100% selectors.
Note: Use the movement properties to control the presence of the activity, and furthermore to tie the liveliness to selectors.
Note: The ! significant guideline is overlooked in a keyframe (See the keep going model on this page).
Example:-
<!DOCTYPE html>
<html>
<head>
<title>@keyframes</title>
</head>
<style>
div {
width: 80px;
height:80px;
border-radius: 50px;
background: blue;
position: relative;
animation: mymove 5s infinite;
}
@keyframes mymove {
from {top: 0px;}
to {top: 100px;}
}
</style>
<body>
<h1>The @keyframes Rule</h1>
<p><strong>Note:</strong> The @keyframes rule is not supported in Internet Explorer 9 and earlier versions.</p>
<!------@keyframes add--->
<div></div>
</body>
</html>Output:-
