css - "accelerate, then coast"的动画可以用css实现吗？

Question

我想知道是否可以用 css 实现“加速，然后滑行”动画，就像这个 3D.js example

基本上，一个物体从 0 开始并加速运动直到某个点，然后保持恒定速度。

我认为这可以通过将旋转动画应用到同一元素两次但使用不同的参数来实现: * 第一次旋转:对象在2秒内旋转，没有延迟，具有缓入功能； * 在那之后:对象在 1.5 秒内旋转，并有 2 秒的延迟以解释第一次旋转，具有线性函数。这次旋转无限重复。

所以我尝试了下面的代码

.square {
    width: 120px;
    height: 120px;
    background: #c00;
    -webkit-animation:
        spin 2s 0 ease-in 1,
        spin 1.5s 2s linear infinite;
    -moz-animation:
        spin 2s 0 ease-in 1,
        spin 1.5s 2s linear infinite;
    animation:
        spin 2s 0 ease-in 1,
        spin 1.5s 2s linear infinite;
    }
}
@-moz-keyframes spin {
    100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { transform:rotate(360deg); }
}

我知道它与 3D.js 示例不同，但已经足够接近了。问题是对象在完成第一次旋转之前停了一点，看起来真的很奇怪。

我准备了一个 fiddle 来说明问题:http://jsfiddle.net/e0sLc8sw/

有什么想法吗？

感谢大家的帮助!

Answer 1

不就是因为你在第二个动画中添加了2次吗？

根据 MDN , 第二次输入被视为 animation-delay ，它告诉动画在该时间段后开始。

从动画中删除 2s 部分效果很好:

.square {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    width: 100px;
    height: 100px;
    background: #c00;
    -webkit-animation:
        spin 2s 0 ease-in 1,
        spin 1.5s linear infinite;
    -moz-animation:
        spin 2s 0 ease-in 1,
        spin 1.5s linear infinite;
    animation:
        spin 2s 0 ease-in 1,
        spin 1.5s linear infinite;
}

@-moz-keyframes spin {
    100% { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); } 
}
@keyframes spin { 
    100% { transform:rotate(360deg); }
}

<div class="square spinning">:D</div>

UPDATED FIDDLE