CSS animation-name Property

Specifies the name of the keyframe to which the selection should be bound.

Syntax

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

Example

<!DOCTYPE html>
<html>
<head>
<style>
.box {
    position: relative;
    width: 80px;
    height: 80px;
    background: #00ab55;
    animation-name: moveit;
    animation-duration: 6s;
}

@keyframes moveit {
    from {left: 0;}
    to {left: 200px;}
}
</style>
</head>
<body>

<div class="box"></div>

</body>
</html>

Preview

Property Values

Value	Description
keyframename	Specifies the name of the keyframe to which the selection should be bound.
none	The default value. specifies that no animation shall be used
initial	Set this property's value to the default.
inherit	This attribute is inherited from its parent element.

Supported Browsers

Element	Chrome	Firefox	Safari	Edge / IE	Opera
animation-name	43.0 4.0 -webkit-	16.0 5.0 -moz-	9.0 4.0 -webkit-	10.0	30.0 15.0 -webkit- 12.0 -o-

animation-iteration-count

animation-play-state

CSS animation-name Property

Syntax

Example

Property Values

Supported Browsers

Links

Tutorials

Connect with us