用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 表示无限次循环。