animation-name
Summary
Defines the list of animations that apply to the element.
Overview table
- Initial value
none- Applies to
- All elements, ::before and ::after pseudo-elements
- Inherited
- No
- Media
- visual
- Computed value
- As specified.
- Animatable
- No
- CSS Object Model Property
animationName- Percentages
- N/A
Syntax
animation-name: <single-animation-name> [, <single-animation-name>]*animation-name: none
Values
- none
- No animation applies to the element. You can use this value to override any animations coming from the cascade.
- <single-animation-name> [, <single-animation-name>]*
- One or more comma-separated animation names. Each name is used to select the
@keyframesrule that defines the animation. If the specified name does not match any @keyframes rule then no animation will be run for this name. In addition, when multiple animations update the same property, the animation listed last wins.
Examples
A slide-in animation that executes once, much like a transition.
h1 { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { margin-left: 100%; width: 300% } to { margin-left: 0%; width: 100%; } } A repeating pulse animation that shrinks and dims an element, then restores it.
div.selected { animation-name: pulse; animation-duration: 1s; animation-iteration-count: infinite; } @keyframes pulse { from { transform : scale(1) translateX(0); opacity : 1; } 50% { transform : scale(0.75) translateX(0); opacity : 0.25; } to { transform : scale(1) translateX(0); opacity : 1; } } Usage
Note that animation-name is not sufficient to run an animation. The animation-duration property also needs to be set to a non-zero duration. When animation-name specifies a list of names, other animation properties such as animation-duration should define values corresponding to each name. If the lists of values for the other animation properties do not have the same number of values as animation-name, the length of the animation-name list determines the number of items in each list examined when starting animations. The lists are matched up from the first value: excess values at the end are not used. If one of the other properties doesn’t have enough comma-separated values to match the number of values of animation-name, the list is repeated until there are enough. This truncation or repetition does not affect the computed value.
Related specifications
- CSS Animations
- Working Draft
See also
Other articles
- Making things move with CSS3 animations
- @keyframes
- animation
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-play-state
- animation-timing-function
Attributions
Microsoft Developer Network: Windows Internet Explorer API reference Article