index.md

---
title: animation-name
slug: Web/CSS/animation-name
page-type: css-property
browser-compat: css.properties.animation-name
---

{{CSSRef}}

The **`animation-name`**[CSS](/en-US/docs/Web/CSS) property specifies the names of one or more {{cssxref("@keyframes")}} at-rules that describe the animation to apply to an element. Multiple `@keyframes` at-rules are specified as a comma-separated list of names. If the specified name does not match any `@keyframes` at-rule, no properties are animated.

{{InteractiveExample("CSS Demo: animation-name")}}

```css interactive-example-choice
animation-name: none;
```

```css interactive-example-choice
animation-name: slide;
```

```css interactive-example-choice
animation-name: bounce;
```

```htmlinteractive-example
<section class="flex-column" id="default-example">
 <div class="animating" id="example-element"></div>
</section>
```

```css interactive-example
#example-element {
animation-direction: alternate;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
background-color: #1766aa;
border-radius: 50%;
border: 5pxsolid#333;
color: white;
height: 150px;
margin: auto;
margin-left: 0;
width: 150px;
}

@keyframesslide {
from {
background-color: orange;
color: black;
margin-left: 0;
 }
to {
background-color: orange;
color: black;
margin-left: 80%;
 }
}

@keyframesbounce {
from {
background-color: orange;
color: black;
margin-top: 0;
 }
to {
background-color: orange;
color: black;
margin-top: 40%;
 }
}
```

It is often convenient to use the shorthand property {{cssxref("animation")}} to set all animation properties at once.

## Syntax

```css
/* No animation */
animation-name: none;

/* Single animation */
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.
- {{cssxref("&lt;custom-ident&gt;")}}
 - : An unquoted 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`.
- {{cssxref("&lt;string&gt;")}}
 - : A series of characters following the same rules as custom identifiers, as described above, except that they are surrounded by either double (") or single (') quotes. If using a quoted string for both the `animation-name` and the corresponding {{cssxref("@keyframes")}} at-rule name, `none`, global keywords, and names starting with an underscore or double dashes are valid, though not recommended.

> [!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](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations#setting_multiple_animation_property_values).

## Formal definition

{{cssinfo}}

## Formal syntax

{{csssyntax}}

## 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;
}

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

#### Result

Hover over the rectangle to start the animation.

{{EmbedLiveSample("Naming an animation","100%","250")}}

See [CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) for examples.

## Specifications

{{Specifications}}

## Browser compatibility

{{Compat}}

## See also

-[Using CSS animations](/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations)
- JavaScript {{domxref("AnimationEvent")}} API
- Other related animation properties: {{cssxref("animation")}}, {{cssxref("animation-composition")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-fill-mode")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-play-state")}}, {{cssxref("animation-timeline")}}, {{cssxref("animation-timing-function")}}