用css3动画来实现物体上下跳动的效果

用几行简单的代码实现上下跳动的效果：

html部分 (我就先放了一张图片)

[html]  view plain  copy

1. <div class="goods">  
2.        <img src="images/box1.png" />  
3.    </div>  

css部分：

[html]  view plain  copy

1. * {  
2.            margin: 0;  
3.            padding: 0;  
4.        }  
5.          
6.        img {  
7.            display: inline-block;  
8.        }  
9.          
10.        .goods {  
11.            width: 50%;  
12.            text-align: center;  
13.            margin: 50px auto;  
14.        }  
15.          
16.        .goods img {  
17.            animation: myfirst 2s infinite;  
18.        }  
19.          
20.        @keyframes myfirst {  
21.            0% {  
22.                transform: translate(0px, 0px);  
23.            }  
24.            50% {  
25.                transform: translate(0px, -10px);  
26.            }  
27.            100% {  
28.                transform: translate(0px, 0px);  
29.            }  
30.        }  

就这几行 就简单的搞定啦~

然后说一下实现的原理吧：

这个效果用的是css3动画

我们可以用 @keyframes 规则来创建动画，你可以用百分比来规定变化发生的时间（如：0%，25%，50%，100%），或用关键词 "from" 和 "to"，等同于 0% 和 100%。

设置完动画我们需要将动画绑定到我们要实现动画的元素上去。我这个例子中，就是绑定到  .good img上  用“animation: myfirst 2s infinite;” 第一个元素值代表的是动画的名称，第二个是动画的时长，第三个表示的是动画执行的次数 infinite 表示无限次循环。