用CSS3动画animation 做一个logo在盒子里自由碰撞效果小案例

<style>
//css样式
    .box {
        width: 580px;
        height: 300px;
    }
    .box div {
        width: 100px;
        height: 100px;
        border: 1px solid #ccc;
        background: url(../smalllogo.jpg) center /cover;
        //animation设置运动方式
        animation: horizontal 3.7s infinite -1.4s linear alternate,vertical 4.1s infinite -2.1s linear alternate;    
        // 动画合成
        animation-composition: accumulate;
    }
    //设置logo 左右上下移动
    @keyframes horizontal {
       from{transform:translateX(0);}
       to {transform:translateX(calc(580px - 100%))}
    }
    @keyframes vertical {
       from{transform :translateY(0)}
       to {transform:translateY(calc(300px - 100%))}
    }
</style>

效果：
logo 在盒子里自由滚动