CSS Reference Manual

CSS @rules

Complete list of CSS attributes

CSS3 animation-play-state Attribute CSS3 animation-iteration-count Attribute

CSS3 animation-Usage and examples of the name property

The animation-The nameCSS property specifies the name@keyframes that should be applied to the selected element to define the animation.

The table below summarizes the usage context and version history of this property.

Default Value:	none
Applicable To:	All elements::before and::after Pseudo-element
Inheritance:	No
Animatable:	No.See Also Animation Attribute.
Version:	CSS3new feature
JavaScript Syntax:	object　　　object.style.animationName="mymove"

animation-name Syntax Usage

The syntax of this attribute is as follows:

animation-name: keyframe-name | none | initial | inherit

The following example demonstrates how to use animation-name Attribute.

Example

.box {
　　　　width:　50px;
　　　　height:　50px;
　　　　background: red;
　　　　position: relative;
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-animation-name: moveit;
　　　　-webkit-animation-duration:　2s;
　　　　
　　　　animation-name: moveit;
　　　　animation-duration:　2s;
}
　
/*　Chrome, Safari, Opera　*/
@-webkit-keyframes moveit {
　　　　from {left: 0;}
　　　　to {left:　50%;}
}
　
@keyframes moveit {
　　　　from {left: 0;}
　　　　to {left:　50%;}
}

Test See‹/›

Attribute Value

The following table describes the value of this attribute.

Value	Description
keyframe-name	Specify the name of the keyframes to be bound to the selector.
none	Specify no animation. This can be used to override or disable any animation from the cascade.
initial	Set this attribute to its default value.
inherit	If specified, the associated element uses its parent element's animation-Calculated Value of name Attribute.

Browser Compatibility

animation-Browser Compatibility of name Attribute, all mainstream browsers support this attribute.

	Firefox 5+ ^-moz-,15 + Google Chrome 4+ ^-webkit- Internet Explorer 10+ Apple Safari 4+ ^-webkit- Opera 12+ ^-o-,15+ ^-webkit-