CSS动画实现另一种波浪效果

上次写了波浪，这次又是另一种，我这得有多爱波浪啊~
这个更简单些，还是利用animation动画来做。
贴代码

HTML

<div class="container"></div>

CSS

.container {
    position        : relative;
    height          : 637px;
    padding-bottom  : 20px;
    background-color: #56a7d2;
}

.container:after {
    background-image: url('images/wave.png');
    content         : '';
    position        : absolute;
    bottom          : 0;
    display         : block;
    width           : 100%;
    height          : 20px;
    animation       : waves 150s linear infinite;
}

@keyframes waves {
    from {
        background-position: 0 0
    }

    to {
        background-position: 1000rem 0
    }
}

background里边的wave.png在此

大家可以任意调整animation的时间，或者keyframe的值来修改波浪移动的速度。