CSS six ...

1.animation-name: The animated name of the custom animation, which must be used in conjunction with the rule @keyframes, because the animation name is defined by keyframes.

div {           -webkit-animation-name:fromlefttoright;           Animation:fromlefttoright;}

2.keyframes: Keyframe, with a @keyframes opening followed by an animated name plus a curly brace.

-webkit-keyframes fromlefttoright {           from{           margin-left:0;}            to{           margin-left:100px;       }}

3.animation Duration (animation time): Sets the duration of the object animation.

div {        animation-duration:1s;        -webkit-animation-duration:1s;}

4.animation-timing-function: The transition speed type of the animation.

div {      -webkit-animation-timing-function:ease-in;      animation-timing-fucntion:ease-in;}

5.animation-delay: The delay time of the animation.

div {       -webkit-animation-delay:1s;       Animation-delay:1s;}

6.animation-altertion-count: Sets the number of times the animation is executed.

div {          -webkit-animation-iteration-count:2;        Animation-iteration-count:2;}

7.animation-direction: Sets the order in which animations are executed.

divi {          -webkit-animation-direction:normal/reverse/alternate/alternate-reverse}

8.animation-play-state: Sets the state of the animation.

div {       -webkit-animation-play-state:running/paused;}

9.animation-fill-mode: Sets the state outside of the animation time.

div {       Animation-fill-mode:none/forwards/backwards/both}

10.animation: Sets the composite properties of the animation.

div {     animation:animation-name/animation-duration/animation-timing-function/                     animation-delay/ animation-alteration-count/animation-direction/                     animation-fill-mode/animation-paly-state,...}

CSS six ...