CSS animation-name property

Description

CSS animation-name property represents a list of one or more keyframe-names separated by comma. Each keyframe-name applies property values to an element.

We take an example of animation with one or more keyframe rules.

Syntax

animation-name : none | keyframe-name1, keyframe-name2,..

Property values

noneDefault

There will be no animation.

animation-name: none;

keyframe-name

It represents single @keyframe rule . It consists of different time intervals and each time interval containing respective property values. We are using 'rotate' keyframe as the value of animation-name.

animation-name: rotate;

keyframe-name list

We can use more than one different keyframes as the value of animation-name. We are using 'rotate' and 'moveTo' keyframes as the value of animation-name.

If more than one keyframes are affecting the same CSS property, the last keyframe will override the previous ones.

animation-name: rotate, moveTo;

Applicable to

It applies to all elements

From web4college, the free CSS digger

#CSS digger
Was this article helpful?

 
▾
×

Ctrl+D