The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.


< css‎ | properties
Jump to: navigation, search


This article is Ready to Use.

W3C Working Draft


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


  • animation-name: <single-animation-name> [, <single-animation-name>]*
  • animation-name: 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 @keyframes rule 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.


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%;

View live example

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;

View live example


 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

Specification Status Related Changes
CSS Animations Working Draft

See also

Other articles


This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: Windows Internet Explorer API reference Article