This page is Ready to Use

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



Defines the list of animations that apply to the element.

Overview table

Initial value
Applies to
All elements, ::before and ::after pseudo-elements
Computed value
As specified.
CSS Object Model Property


  • 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

CSS Animations
Working Draft

See also

Other articles