CSS - animation-name Property

Quiz

CSS animation-name property gives the name to the @keyframes that define the animation of an element. These rules, which are listed as a comma-separated sequence, describe the animation behavior.

Syntax

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

Property Values

Value	Description
keyframes	This specifies the name of the keyframe to be applied on the selector
none	This specifies that there will not be any animation and is the default value.
initial	This sets the property to its initial value.
inherit	This inherits the property from the parent element.

Examples of CSS animation-name Property

Below listed examples will illustrate the animation-name property with different values.

Animation Name with Keyframes

In the example, a keyframe describing the animation with name slide has been created, this is linked with the .box class which uses these rules for the animation of the box.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        @keyframes slide {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(300px);
            }
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: teal;
            animation-name: slide;
            /* Assigning the animation name */
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
    </style>
</head>

<body>
    <h2>CSS Animation Name Property</h2>
    <div class="box"></div>
</body>

</html>

Animation Name with None

When the animation name is set to none, no animation occurs. In the example, the animation name has been set to none and so the box is static.

Example

<!DOCTYPE html>
<html>

<head>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: teal;
            animation-name: none;
            /* Assigning the animation name */
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
    </style>
</head>

<body>
    <h2>CSS Animation Name Property</h2>
    <div class="box"></div>
</body>

</html>

Supported Browsers

Property
animation-name	43.0	10.0	16.0	9.0	30.0

Print Page