css - 在不同点开始 CSS3 动画

Question

我有一些使用 CSS3 在屏幕上不断移动 div 的代码，我想做的是在第一个动画周期的动画中的不同点（即 20%）开始我用 CSS 编写的动画，从然后从 0% 开始每个周期。感谢您的帮助，下面的 JSFiddle。

HTML：

<div class="x1">

</div>

CSS：

.x1 {
right: 30%;
top: 90px;
-webkit-animation: animato 15s linear infinite;
-moz-animation: animato 15s linear infinite;
-o-animation: animato 15s linear infinite;
animation: animato 15s linear infinite;
}

@keyframes animato {
    0% { right: -25%; }
    20% { right: 0%; }
    40% { right: 25%; }
    60% { right: 50%; }
    80% { right: 75%; }
    100% { right: 100%; }
}

http://jsfiddle.net/ER287/

比如说，我将如何从animato20% 开始？

Answer 1

使用否定animation-delay：

.x1 {
    right: 30%;
    top: 90px;
    -webkit-animation: animato 15s linear infinite;
    -moz-animation: animato 15s linear infinite;
    -o-animation: animato 15s linear infinite;
    animation: animato 15s linear infinite;

    -webkit-animation-delay: -3s; /* offsets the animation starting point for 3/15 = 20% */
    -moz-animation-delay: -3s;
    -o-animation-delay: -3s;
    animation-delay: -3s;
}

小提琴