DEV Community

Share Point Anchor
Share Point Anchor

Posted on • Originally published at sharepointanchor.com on

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;

Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

Result:

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

Result of animation-name property

Browser-Support:

Browser-support

Related Articles:

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 appeared first on Share Point Anchor.

Top comments (0)