CSS animation-name property


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.


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

Property values


There will be no animation.

animation-name: none;


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

#CSS digger
Was this article helpful?