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

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

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

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

css部分：
* {
margin: 0;
padding: 0;
}

img {
display: inline-block;
}

.goods {
width: 50%;
text-align: center;
margin: 50px auto;
}

.goods img {
animation: myfirst 2s infinite;
}

@keyframes myfirst {
0% {
transform: translate(0px, 0px);
}
50% {
transform: translate(0px, -10px);
}
100% {
transform: translate(0px, 0px);
}
}就这几行 就简单的搞定啦~
然后说一下实现的原理吧：

这个效果用的是css3动画

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

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