animation-timing-function
CSS animation-timing-function Property
The CSS animation-timing-function property specifies the transition effect of an animation. For instance whether it starts fast and slows to a stop, starts slow and speeds to a stop, and other transition effects. Animations will "ease" by default if you omit this property.
Possible Values
animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
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-timing-function (Chrome and Safari)
- -moz-animation-timing-function (Firefox)
- -ms-animation-timing-function (Internet Explorer)
- -o-animation-timing-function (Opera)
- animation-timing-function (Standard)
<!DOCTYPE html>
<html>
<style type="text/css">
div#box1 {
-webkit-animation-name: box-move;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
background:#D3F7FE;
border:#000 1px solid;
width:100px;
height:100px;
position:relative;
left: 0px;
top: 0px;
}
@-webkit-keyframes box-move {
50% { top: 300px; left: 25%; }
100% { top: 0px; left: 0px; }
}
</style>
<body>
<div id="box1">BOX 1</div>
</body>
</html>
0 Response to "animation-timing-function"
Post a Comment