CSS animation-name property
Tags: learncss, cssa
Published: 2021-05-10 08:41:53

---
title: CSS animation-name property
published: true
date: 2021-02-25 04:51:38 UTC
tags: LearnCSS,CSSA
canonical_url: https://sharepointanchor.com/learn-css/css-animation-name-property/
---

The CSS animation-name property is used to **specify one or more names for the @keyframes animation**. When multiple comma-separated values are specified for any animation property, they will be attached to the animations that are defined in animation-name differently.

This is one of the **CSS3** properties. Different animation properties can control the animation.

- The CSS animation-name property accepts the following values.
  - **none**
  - **keyframename**
  - **initial**
  - **inherit**

## Characteristics of animation-name property:

| **Initial value** | none |
| **Applies to** | All elements. It also applies to **`::before`** and **`::after`** Pseudo-elements |
| **Inherited** | No |
| **Animatable** | No |
| **Version** | CSS3 |
| **JavaScript syntax** | **`object.style.animationName = "element";`** |

## Syntax:

```

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

```

## Values:

| **Value** | **Description** |
| --- | --- |
| **none** | This is a **default value** and **specifies that there will be no animation**. |
| **keyframename** | It **specifies the name of the animation**. |
| **initial** | This value makes the property **use its default val** ue. |
| **inherit** | **Inherits the property from its parent’s** element. |

## Example of the animation-name property:

In the following code, the name of the animation is set as “ **colors** “.

```

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {

        padding: 50px;

        animation: element 4s infinite;

      }
      @keyframes element {
        0% {

          background-color: #BA55D3;

        }
        50% {

          background-color: #8A2BE2;

        }
        100% {

          background-color: #9400D3;

        }
      }
    </style>
  </head>
  <body>

    <h2>Animation-name example</h2>

    <div>The name of the animation is set as "colors".</div>

  </body>
</html>

```

## Result:

After executing the above code, you will get the result as shown in the below image.

![](https://sharepointanchor.com/wp-content/uploads/2021/02/0Nfxoh3CpB.gif)<figcaption>Result of animation-name property</figcaption>

## Browser-Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/chrome_rIHCvsBneR.png)<figcaption>Browser-support</figcaption>

**Related Articles:**

- **[CSS animation Property](https://sharepointanchor.com/learn-css/css-animation-property/)**
- **[CSS animation-direction property](https://sharepointanchor.com/learn-css/css-animation-direction-property/)**
- **[animation-duration property](https://sharepointanchor.com/learn-css/css-animation-duration-property/)**
- **[CSS animation-iteration-count property](https://sharepointanchor.com/learn-css/css-animation-iteration-count-property/)**
- **[CSS all Property](https://sharepointanchor.com/learn-css/css-all-property/)**

## Frequently Asked Questions:

**Describe the usage of animation-name property.** 

CSS animation-name property is used to **specify one or more names for the @keyframes animation**.

 
 
**What is the default value of animation-name property?** 

The default value of an animation-name property is “ **none** “. It **specifies that there will be no animation**.

 
 
**Define the syntax of animation-name property?** 

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

 
 
**Is it possible to give multiple values in an animation property?** 

Yes, multiple comma-separated values are specified for any animation property, they will be attached to the animations that are defined in animation-name differently.

 
 

The post [CSS animation-name property](https://sharepointanchor.com/learn-css/css-animation-name-property/) appeared first on [Share Point Anchor](https://sharepointanchor.com).