可以用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 示例不同，但已经足够接近了。问题是对象在完成第一次旋转之前停了一点，看起来很奇怪。

我已经准备了一个小提琴来展示这个问题：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

Answer 2

前面的示例在现代 Chrome (2018) 中不起作用。这是一个使用三次贝塞尔曲线处理加速度的更新示例 - 你可以play around with the acceleration parameters here。

第一个动画处理加速 - 这里的 3s 表示它将在 3 秒后使用贝塞尔加速功能到达最后一帧。然后它终止。第二个动画中的 3s 表示这个动画正好从另一个动画停止的地方开始，即它有 3 秒的延迟，但这个动画永远不会终止，因为它具有“无限”持续时间。 0.5 秒的速度要快得多。

理想情况下，0.5 秒的速度应该与由 Bezier 加速度引起的第一个动画的精确速度相匹配。这是手动计算，我认为 CSS 没有帮助，我没有在这里执行，只是使用了眼睛测试。

.square {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    width: 100px;
    height: 100px;
    background: #c00;
    animation:
        spin 3s cubic-bezier(.52,.29,.83,.13),
        spin 0.5s linear 3s infinite;
}

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

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