animation-name
==============

The **`animation-name`** CSS property specifies the names of one or more `@keyframes` at-rules that describe the animation to apply to an element. Multiple `@keyframe` at-rules are specified as a comma-separated list of names. If the specified name does not match any `@keyframe` at-rule, no properties are animated.

Try it
------

It is often convenient to use the shorthand property `animation` to set all animation properties at once.

Syntax
------


```css
/\* Single animation \*/
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

/\* Multiple animations \*/
animation-name: test1, animation4;
animation-name:
  none,
  -moz-specific,
  sliding;

/\* Global values \*/
animation-name: inherit;
animation-name: initial;
animation-name: revert;
animation-name: revert-layer;
animation-name: unset;
```

### Values

`none`

A special keyword denoting no keyframes. It can be used to deactivate an animation without changing the ordering of the other identifiers, or to deactivate animations coming from the cascade.

`<custom-ident>`

A name identifying the animation. This identifier is composed of a combination of case-sensitive letters `a` to `z`, numbers `0` to `9`, underscores (`_`), and/or dashes (`-`). The first non-dash character must be a letter. Also, two dashes are forbidden at the beginning of the identifier. Furthermore, the identifier can't be `none`, `unset`, `initial`, or `inherit`.


**Note:** When you specify multiple comma-separated values on an `animation-*` property, they are applied to the animations in the order in which the `animation-name`s appear. For situations where the number of animations and `animation-*` property values do not match, see Setting multiple animation property values.

Formal definition
-----------------

|  |  |
| --- | --- |
| Initial value | `none` |
| Applies to | all elements, `::before` and `::after` pseudo-elements |
| Inherited | no |
| Computed value | as specified |
| Animation type | Not animatable |

Formal syntax
-------------
```

animation-name =   
  [ none | <keyframes-name> ]#    
  
<keyframes-name> =   
  <custom-ident>  |  
  <string>          
  
```

Examples
--------

### Naming an animation

This animation has an `animation-name` of `rotate`.

#### HTML


```html
<div class="box"></div>
```


#### CSS


```css
.box {
  background-color: rebeccapurple;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

.box:hover {
  animation-name: rotate;
  animation-duration: 0.7s;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
```


#### Result

Hover over the rectangle to start the animation.

See CSS animations for examples.

Specifications
--------------

| Specification |
| --- |
| CSS Animations Level 1 # animation-name |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Using CSS animations
* JavaScript `AnimationEvent` API
* Other related animation properties: `animation`, `animation-composition`, `animation-delay`, `animation-direction`, `animation-duration`, `animation-fill-mode`, `animation-iteration-count`, `animation-play-state`, `animation-timeline`, `animation-timing-function`