animation-name - HTML CSS CSS Property

Description

The animation-name CSS property selects the name of @keyframes to play on element.

The following table summarizes the animation-name Property.

Item	Value
Default value:	none
Applies to:	All elements, ::before and ::after pseudo-elements
Inherited:	No
Animatable:	No.

Syntax

The syntax of the property is as follows:

animation-name:     keyframe-name | none | initial | inherit

Property Values

The following table describes the values of this property.

Value	Description
keyframe-name	Set the name of the keyframe.
none	Turn off animation.
initial	Sets this property to its default value.
inherit	take the value of its parent element animation-name property.

The example below shows the animation-name property.

Example

Demo Code

ResultView the demo in separate window

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS3 animation-name Property</title>
  <style type="text/css">
.box {<!--from  w  w  w.  ja va  2s.c o m-->
    width: 153px;
    height: 103px;
  margin: 50px;
    background: url("https://www.java2s.com/style/demo/Opera.png") no-repeat;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 2s;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 2s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}

/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
</style>
 </head>
 <body>
  <div class="box"></div>
 </body>
</html>