About css

CSS_Animation.md

Animation

Properties

animation-name: declares the name of the @keyframes at-rule to manipulate.

animation-duration: the length of time it takes for an animation to complete one cycle.

animation-timing-function: establishes preset acceleration curves such as ease or linear.

animation-delay: the time between the element being loaded and the start of the animation sequence.

animation-direction: sets the direction of the animation after the cycle. 
Its default resets on each cycle.

animation-iteration-count: the number of times the animation should be performed.

animation-fill-mode: sets which values are applied before/after the animation.
For example, you can set the last state of the animation to remain on screen, 
or you can set it to switch back to before when the animation began.

animation-play-state: pause/play the animation.

Examples

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

Shorthand

.element {
  animation: animation-name 1.5s ease-out 0s alternate infinite none running;
}

animation-name

/* Single animation */
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

/* Multiple animations */
animation-name: test1;
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;

/* Global values */
animation-name: initial
animation-name: inherit
animation-name: unset

animation-duration

animation-duration: 1s;
animation-duration: 1ms;

animation-timing-function

animation-timing-function: ease;
animation-timing-function: ease-out;
animation-timing-function: ease-in;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: cubic-bezier(x1, y1, x2, y2);

animation-delay

animation-delay: 1s;
animation-delay: 1ms;

animation-direction

/* Single animation */
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/* Multiple animations */
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

/* Global values */
animation-direction: inherit;
animation-direction: initial;
animation-direction: unset;

animation-iteration-count

X - count;

animation-iteration-count: X
animation-iteration-count: 10

animation-fill-mode

animation-fill-mode: forwards
animation-fill-mode: backwards
animation-fill-mode: both
animation-fill-mode: none

animation-play-state

animation-play-state: paused
animation-play-state: running