用于小动画的立方贝塞尔设置

Question

嘿伙计们我有一个简单的动画，我想做一个小小的修正，

到目前为止我所拥有的是什么：

HTML：

<div class="animated"></div>

CSS：

div {
    width: 200px;
    height: 200px;
    background: #eee;
}
.animated {
    animation-name: cst-animation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    -webkit-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}
@keyframes cst-animation {
    0% {
        transform:translate3d(50px, 0, 0);
    }
    100% {
        transform:translate3d(0, 0, 0);
    }
}  

现在这个工作正常，但效果只显示从0％移动到100＆amp; I.E.当动画开始时，动画是3秒，并从50px移动到0px，这正是我编码动画的时候，当动画重复时（因为迭代计数设置为无限），从0px突然转移到50px，我该如何阻止这种情况发生？

我的 secound问题：

我在关键帧内看到cubic-bezier的设置如下：

@keyframes cst-animation{

                0% , 100%{
                    -webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.220, 0.855); 
   -moz-transition-timing-function: cubic-bezier(0.250, 0.250, 0.220, 0.855); 
     -o-transition-timing-function: cubic-bezier(0.250, 0.250, 0.220, 0.855); 
        transition-timing-function: cubic-bezier(0.250, 0.250, 0.220, 0.855); /* custom */
                }
                0%{
                    transform:translate3d(50px ,0,0);
                }
                100%{
                    transform:translate3d(0 ,0,0);
                }
            }

有不同的方式，而不是：

0,100%{
   // my custom cubic bezier
}

小提琴可以找到here

我是CSS-3的新手，所以我非常感谢任何帮助。