css3动画学习
最近研究CSS3的动画，还是相当的强大啊，做了一个小皮球跳跳的动画DEMO，代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 animation</title>
<style>
.animation {
-webkit-animation-name: bounce;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 10;
-webkit-animation-direction: alternate;
-webkit-border-radius:100px;
position: relative;
left: 0;
top:100px;
width:100px;
height:100px;
text-align:center;
line-height:100px;
background:#F00;
}
@-webkit-keyframes bounce {
from {
top: 0;
-webkit-animation-timing-function: ease-out;
}
25% {
top: 110px;
-webkit-animation-timing-function: ease-out;
}
50% {
top: 50px;
-webkit-animation-timing-function: ease-out;
}
75% {
top: 90px;
-webkit-animation-timing-function: ease-out;
}
to {
top: 100px;
}
}
</style>
</head>
<body>
<div class="animation">皮球</div>
</body>
</html>
参考文档：