/    /  CSS @keyframes rule

CSS @keyframes rule

 

A @keyframes rule consists of the keyword “@keyframes”, followed by an identifier giving a name for the animation (using the animation-name property), followed by a set of style rules (delimited by curly braces).

 

Syntax:

 

@keyframes animation-name {
 keyframes-selector {
   property: value;
  }
}

 

Parameters:

 

animationname         Name of the animation.

keyframes-selector    Percentage of the animation duration.

css-styles                     One or more legal CSS style properties.

 

Note: keyframe selector specifies negative percentage values or values higher than 100%, then the keyframe will be ignored.

 

Example:

 

<!DOCTYPE html>
<html>
<head>
<style>
div {
 width: 100px;
 height: 100px;
 background: green;
 position: relative;
 animation: mymove 5s infinite;
}

@keyframes mymove {
 0%   {top: 0px;}
 25%  {top: 200px;}
 75%  {top: 50px}
 100% {top: 100px;}
}
</style>
</head>
<body>

<h1>The @keyframes </h1>
<div></div>
</body>
</html>

 

OUTPUT:

 

CSS @keyframes rule