CSS3动画之抛物线运动
今天来说下CSS3动画,目标是让一个方块做抛物线运动。主要用到的CSS3属性有animation,transform,@keyframes,transition等。
Animation版-0
我们先建立一个HTML文件,test.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="animation.css"/>
</head>
<body>
<div class="item"></div>
</body>
</html>
因为animation属性可以通过@keyframes 规则创建动画,那么如果我们要做抛物线,可以尝试简单定义几个阶段的位置。
编写我们的CSS文件,animation.css:
.item {
width:50px;
height: 50px;
display: inline-block;
position: absolute;
top: 100px;
background-color: red;
}
div {
animation: example 3s linear 1s 1;
-webkit-animation: example 3s linear 1s 1;
-moz-animation: example 3s linear 1s 1;
}
@-moz-keyframes example {
0% { transform: translate3d(0px, 0, 0); }
25% { transform: translate3d(100px, -40px, 0); }
50% { transform: translate3d(200px, -56px, 0); }
75% { transform: translate3d(300px, -68px, 0); }
100% { transform: translate3d(400px, -80px, 0); }
}
@-webkit-keyframes example {
0% { transform: translate3d(0px, 0, 0); }
25% { transform: translate3d(100px,