多个贝塞尔曲线在同一个animate动画中的实践

贝塞尔曲线(Bézier curve)：
又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。在Flash4中还没有完整的曲线工具，而在Flash5里面已经提供出贝塞尔曲线工具。

贝塞尔模拟：
http://cubic-bezier.com/#.17,.67,.83,.67

动画要求：

代码：

@keyframes followMe {
        0% {transform: translate3d(0, 0, 0);
        transition-timing-function:cubic-bezier(0.26,0.00,0.60,0.20);}
        10% {transform: translate3d(0, -10px, 0);
        transition-timing-function:cubic-bezier(0.40,0.80,0.74,1.00);}
        20% {transform: translate3d(0, 0, 0);
        transition-timing-function:cubic-bezier(0.26,0.00,0.60,0.20);}
        30% {transform: translate3d(0, 0, 0);
        transition-timing-function:cubic-bezier(0.40,0.80,0.74,1.00);}
        40% {transform: translate3d(0, -10px, 0);
        transition-timing-function:cubic-bezier(0.26,0.00,0.60,0.20);}
        50% {transform: translate3d(0, 0, 0);}
        100% {transform: translate3d(0, 0, 0)}
    }
.swiper-follow{
        animation: followMe 2s;
        animation-delay: 3s;
        animation-iteration-count: 2;
    }