animation-direction

animation-direction
CSS animation-direction Property
The CSS animation-direction property is used to specify whether or not the animation should play in reverse on some or all cycles. Playing an animation in reverse also reverses the timing functions and easing in/out of the animation.

Possible Values
animation-direction: normal | reverse | alternate | alternate-reverse

NOTE: We must use browser specific prefixes until this property is standardized. Once this property is working in all browser software without prefixes, we can remove all of the prefixes. Use all four of the following prefixes, then add the standard property last. This assures it will work in most browsing environments even after this property is a standard.
-webkit-animation-direction (Chrome and Safari)
-moz-animation-direction (Firefox)
-ms-animation-direction (Internet Explorer)
-o-animation-direction (Opera)
animation-direction (Standard)

Reverse an animation:

<!DOCTYPE html>
<html>
<style type="text/css">
div#box1 {
    -webkit-animation-name: box-animate;
    -webkit-animation-direction: reverse;
    -webkit-animation-duration: 3s;
    -webkit-animation-iteration-count: infinite;
    background:#D3F7FE;
    border:#000 1px solid;
    width:150px;
    height:150px;
    position:relative;
    left: 0px;
    top: 0px;
}
@-webkit-keyframes box-animate {
    from { left: 0px; top: 0px; }
    to { left: 100px; top:100px; background:#000; color:#FFF; }
}
</style>
<body>
<div id="box1">BOX 1</div>
</body>
</html>
click here to code.
animation-direction

0 Response to "animation-direction"

Post a Comment
