what are @keyframes in CSS?

Answer 1

Definition and Usage

The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS styles to another.

During the animation, you can change the set of CSS styles many times.

Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

Tip: For best browser support, you should always define both the 0% and the 100% selectors.

Note: Use the animation properties to control the appearance of the animation, and also to bind the animation to selectors.

CSS Syntax

@keyframes animationname {keyframes-selector {css-styles;}}

Example

Make an element move gradually 200px down:

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
} 

/* Standard syntax */ 
@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}