CSS Animation - 9 Properties and its Values (Reference)

Tech:
Css
Since:
1 year ago
Views:
4

CSS animation is a way to animate the properties of an element such as the color, size, background-color, position and more.

Animation properties:

animation

A shorthand property for all the animation-* properties.

animation: name duration timing-function delay iteration-count direction
  fill-mode play-state;

animation-name

Specifies a name for the @keyframes animation.

animation-name: keyframename;
animation-name: none;
animation-name: initial;
animation-name: inherit;

animation-duration

Specifies how long an animation should take to complete one cycle.

animation-duration: time;
animation-duration: initial;
animation-duration: inherit;

animation-delay

Specifies a delay for the start of an animation.

animation-delay: time;
animation-delay: initial;
animation-delay: inherit;

animation-direction

Specifies whether an animation should be played forwards, backwards or in alternate cycles.

animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;
animation-direction: initial;
animation-direction: inherit;

animation-fill-mode

Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).

animation-fill-mode: none;
animation-fill-mode: forwards;
animation-fill-mode: backwards;
animation-fill-mode: both;
animation-fill-mode: initial;
animation-fill-mode: inherit;

animation-play-state

Specifies the number of times an animation should be played.

animation-iteration-count: number;
animation-iteration-count: infinite;
animation-iteration-count: initial;
animation-iteration-count: inherit;

animation-iteration-count

Specifies the number of times an animation should be played.

animation-iteration-count: number;
animation-iteration-count: infinite;
animation-iteration-count: initial;
animation-iteration-count: inherit;

animation-timing-function

Specifies the speed curve of an animation.

animation-timing-function : linear;
animation-timing-function : ease;
animation-timing-function : ease-in
animation-timing-function : ease-out;
animation-timing-function : ease-in-out;
animation-timing-function : step-start;
animation-timing-function : step-end;
animation-timing-function : steps(int,start;
animation-timing-function : end);
animation-timing-function : cubic-bezier(n,n,n,n);
animation-timing-function : initial;
animation-timing-function : inherit;
More Articles
CSS Background - 10 Properties and its Values (Reference)
1 year ago
2
CSS Font - 11 Properties and its Values (Reference)
1 year ago
3
CSS Text - 11 Properties and its Values (Reference)
1 year ago
7
CSS Flex - 13 Properties and its Values (Reference)
1 year ago
0
CSS Functions - 14 Functions (Reference)
1 year ago
7