HTML and CSS Reference
In-Depth Information
where
timingfunction
is one of the following values:
cubic-bezier(
number
,
number
,
number
,
number
) | ease | ease-in | ease-in-out
| ease-out | linear
The default value is
ease
.
Example
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
CSS Animations - animation-timing-function
</title>
<style type="text/css">
@-webkit-keyframes move {
from {left: 0; top: 0;}
50% {left: 300px;top: 0;}
to {left: 600px; top: 0;}
}
#anim1 {-webkit-animation-name: move;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
position:absolute;
background-color: purple; }
#controls {position: absolute; top: 100px; left: 10px;}
</style>
</head>
<body>
<div id="anim1">
Watch me move!
</div>
<form id="controls"
onchange="document.getElementById('anim1').style.webkitAnimationTimingFunct
ion=this.options[this.selectedIndex].value;">
<select>
<option value="cubic-bezier(110,120,210,280)">
cubic-bezier
</option>
<option value="ease">
ease
</option>
<option value="ease-in">
ease-in
</option>
<option value="ease-in-out">
ease-in-out
</option>
<option value="ease-out">
ease-out
</option>
<option value="linear" selected>
linear
</option>
</select>
</form>
</body>
</html>
O
NLINE
http://htmlref.com/ch6/animationtimingfunction.html
