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.
|