The animation of CSS

Animation-name: Custom animation name;

keyframes: key frame;

Animation-iteration-count : Animation execution times;

div{

width:300px;

height:300px;

Background-color:pink;

Animation-name:fromlefttoright;

Animation-duration:2s;

Animation-iteration-count:3;

}

@keyframes fromlefttoright{

from{

margin-left:10px;

}

to{

margin-left:300px;

}

}

animation-direction : normal | reverse | alternate | alternate-reverse;

Normal : Normal Direction

Reverse : Run in reverse direction

Alternate : Animation runs in the opposite direction and runs continuously alternately

Alternate-reverse : The animation runs in reverse direction and runs continuously alternately

div {

width:100px;

height:100px;

Background: #5CBE3E;

margin:5px;

Animation-name:fromlefttoright;

animation-duration:3s;

Animation-iteration-count:infinite;

}

div{

Animation-direction:reverse;

}

. alternate {

Animation-direction:alternate;

}

div {

Animation-direction:alternate-reverse;

}

@keyframes Fromlefttoright {

from {

margin-left:0;

}

to {

margin-left:300px;

}

}

The animation of CSS