Definition and Usage
The animation property is a shorthand property for six of the animation properties:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction.
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction.
Note: Always specify the animation-duration property, otherwise the duration is 0, and will never be played.
Property Values
| Value | Description |
|---|---|
| animation-name | Specifies the name of the keyframe you want to bind to the selector |
| animation-duration | Specifies how many seconds or milliseconds an animation takes to complete |
| animation-timing-function | Specifies the speed curve of the animation |
| animation-delay | Specifies a delay before the animation will start |
| animation-iteration-count | Specifies how many times an animation should be played |
| animation-direction | Specifies whether or not the animation should play in reverse on alternate cycles |
| animation-fill-mode | Specifies what values are applied by the animation outside the time it is executing |
| animation-play-state | Specifies whether the animation is running or paused |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
<head>
<style>
#myDIV
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 1s infinite;
-webkit-animation:mymove 1s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
@keyframes mynewmove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mynewmove /*Safari and Chrome*/
{
from {top:0px;}
to {top:200px;}
}
</style></head>
<body>
<p>Click the "Try it" button to change the value of the animation property.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("myDIV").style.animation = "mynewmove 4s 2";
document.getElementById("myDIV").style.WebkitAnimation = "mynewmove 4s 2"; // Code for Chrome and Safari
}
</script>
<p><strong>Note:</strong> The animation property is not supported in Internet Explorer 9 and earlier versions.</p>
<div id="myDIV"></div>
</body>
</html>
0 comments:
Post a Comment