CSS animation-name Property

The animation-name references a keyframes name.

@keyframes rules specify the animation conditions.

This is the animation that will play.

Example

#

The animation-name property is assigned to a @keyframe name.

<style> 
  .animate {
    width: 80px;
    height: 80px;
    background: steelblue;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction:alternate;
    animation-name: transformAnimation;
  }
  
  @keyframes transformAnimation {
    from { transform: none; }
    to { transform: translateX(350%) rotate(180deg) scale(.2); }
  }
</style>

<div class="animate"></div>

Syntax

animation-name: keyframename | none | initial | inherit;

Values

#

Value Description
keyframename Keyframe name you want to bind to the selector
none Default. No animation (can be used to override animations coming from the cascade)
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different animation-name values.

<style> 
  .animate-example {
    width: 80px;
    height: 80px;
    background: steelblue;
    
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-name: none;
  }
  
  @keyframes movingAnimation {
    from { transform: none; }
    to { transform: translateX(350%); }
  }
</style>

<div class="animate-example"></div>

Browser support

This table shows when animation-name support started for each browser.

Chrome
43.0 May 2015
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
30.0 Jun 2015
Safari
9.0 Sep 2015

You may also like

Guides