蝸牛動畫

html:

<div id="item3">
    <div class="snailOpction">
        <div class="snail_box1 active fl">
            <img class="snail_1" src="http://wwlin.cn/images/77.png" alt="">
        </div>
        <div class="snail_box2 active fl">
            <img class="snail_2" src="http://wwlin.cn/images/77.png" alt="">
        </div>
    </div>
</div>

css:

#item {
    height: 300px;
    width: 240px;
    position: relative;
    margin: 0 auto;
}
.snailOption {
    position: absolute;
    left: 0;
    top: 100px;
    z-index: 19;
    animation: snailOption 150s linear infinite;
}
@keyframes snailOption {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(340px);
    }
}
.snail_box1 {
    width: 65px;
    height: 64px;
    overflow: hidden;
    position: relative;
    z-index: 22;
}
.snail_box2 {
    width: 55px;
    height: 64px;
    overflow: hidden;
    position: relative;
    z-index: 19;
}
.snail_box1.active {
    animation: snail_box1 3s linear infinite;
}

@keyframes snail_box1 {
    0% {
        transform: translate3d(0,0,0);
    }
    50% {
        transform: translate3d(3px,-5px,0);
    }
    100% {
        transform: translate3d(0,0,0);
    }
}
.snail_box2.active {
    animation: snail_box2 3s linear infinite;
}

@keyframes snail_box2 {
    0% {
        transform: translate3d(0, 0, 0)
    }
    50% {
        transform: translate3d(-5px, -3px, 0);
    }
    100% {
        transform: translate3d(0,0,0);
    }
}
.snail_1 {
    width: 120px;
    height: 64px;
    position: absolute;
    left: 0;
    top: 0;
}
.snail_2 {
    width: 120px;
    height: 64px;
    position: absolute;
    right: 0;
    top: 0;
}
.fl{
    float: left;
}
.fr {
    float: right;
}

原理就是：兩張圖片，分別取前半部分和後半部分，他們在父元素中移動，而他們的父元素，在爺爺輩的元素中移動。OK！