3

我想知道是否可以使用 css 实现“加速，然后滑行”动画，就像在这个3D.js 示例中一样

基本上，一个物体以 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/

任何想法？

谢谢大家的帮助！

4

2 回答 2

1

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

根据MDN，第二个时间条目被视为动画延迟，它告诉动画在该时间段之后开始。

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>

更新的小提琴

于 2014-11-28T16:30:49.137 回答
0

前面的示例在现代 Chrome (2018) 中不起作用。这是一个使用三次贝塞尔曲线处理加速度的更新示例 - 您可以在此处使用加速度参数。

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

理想情况下，0.5 秒的速度应该与贝塞尔加速度引起的第一个动画的精确速度相匹配。这是一个手动计算，我认为 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>

于 2018-04-17T05:34:30.647 回答