HTML Style Animation Name Property

CSS animation-name Property

This property is used to define the animations that should be run.

The @keyframe directive specified defines the properties to animate.

The keyword none can be used to override a cascade.

In other words -

The identifier of the @keyframes rule defines the animation that should be performed on the element.

Syntax -

animation-name: @keyframe-name | none [,@keyframe-name | none]*

Where @keyframe-name is the name of the animation defined by an @keyframe directive.

Now we will see Example -

Example - In this example the box will move with changing size and opacity -

<!DOCTYPE html>
<html>

<style type="text/css">
@-webkit-keyframes move {
from {
top: 0;
left: 0;
opacity: 1;
}

50% {
top: 0;
left: 500px;
opacity: .5;
}

to {
top: 500px;
left: 500px;
opacity: .1;
}
}

@-webkit-keyframes resize {
from {
height: 300px;
width: 100px;
}

50% {
height: 100px;
width: 100px;
}

to {
height: 100px;
width: 300px;
}
}

@-webkit-keyframes fade {
from {
opacity: 1;
}

50% {
opacity: .5;
}

to {
opacity: .1;
}
}

#anim1 {
-webkit-animation-name: move, resize, fade;
-webkit-animation-duration: 10s;
position: absolute;
background-color: purple;
}
</style>

<body>
<div id="anim1">Watch me move and vanish!</div>
</body>

</html>

Output -

A sample output can be -

Note

WebKit supports this property as -webkit-animation-name.

Firefox 3.7 pre-releases show support for CSS transitions which are very related to CSS animation. It is quite likely that a form of this property using the -moz prefix may be supported in a Firefox browser by the time you read this.