Question

我想知道是否有可能实现加速，然后滑行＆＃34;带有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>

可以加速，然后滑行＆＃34;用css实现动画？

2 个答案: