Animation name property (animation-name)

The animation-name property defines the name (or comma-separated names) of @keyframes defined animations to apply.

Syntax:

selector {

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

}

Values:

The values accepted by animation-name property are:

keyframename; The name of the keyframe attached to the animated element.
none; The default value. Disables the automation and is very useful to disable animations coming from cascade (inherited).
initial, inherit

Every animation needs an animation-name, and the animation-duration property set greater than the default value 0s, however, all the other animation-properties are optional, as their default values don’t prevent an animation from happening.

Example

An animation-name property example with other needed properties:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
    background-color:#eee;
}
div {
    position: relative; top:30px; left:5%;
    width: 90%; height: 50px;
    text-shadow:0px 0px 1px #222; 
    font-size:1.5em; color:red;
    animation: animation_name_property 1s infinite;
        /* ADD proprietary selectors if needed */
}
@keyframes animation_name_property {
    50% {text-shadow:0px 0px 0px #eee;}
}
</style>
</head>
  
<body>

<div>The animation-name property defines the name (or comma-separated names) of @keyframes defined animations to apply.</div>

</body>
</html>

›› go to examples ››

Animation name property (animation-name)

Syntax:

Values:

Example

An animation-name property example with other needed properties:

Comments

About

Contact

Get Connected