CSS旋转动画编织无法正常工作答案

【问题标题】：CSS Rotation animation weaving not working properlyCSS旋转动画编织无法正常工作
【发布时间】：2021-11-13 01:47:15
【问题描述】：

我正在尝试用 css 实现一个简单的动画。我的标记具有以下结构：

<main>
    <left />
    <middle />
    <right />
</main>

我希望我的动画执行以下序列：

// second 0 - 2: Do nothing
// second 2 - 3: hide the middle element, move the left element to the right, and the right element to the left.
// second 3 - 4: Rotate the main element 360 degrees
// second 4 - 6: Do nothing
// second 6 - 7: show the middle element, move the left element to the left, and the right element to the right.
// Repeat

这是我的css代码：

@keyframes hideMiddle {
    28.57%, 42.85% {opacity: 0;}
    85.71%, 100% {opacity: 1;}
}
@keyframes moveRight {
    28.57%, 42.85% { transform: translateX(15%);}
    85.71%, 100% {transform: translateX(0%);}
}
@keyframes moveLeft {
    28.57%, 42.85% {transform: translateX(-22%);}
    85.71%, 100% {transform: translateX(0%);}
}
@keyframes rotateMain {
    42.85%, 57.14% {transform: rotate(360deg);}
}

一切正常，直到我添加了 rotateMain 动画，此时它似乎从动画的开始运行，而不是从它设置开始的位置开始运行，并且它似乎做了额外的旋转。任何帮助表示赞赏，非常感谢。

【问题讨论】：

嘿，你能分享一些带有样式的可重现代码吗？只有关键帧没有 HTML 内容不是很有帮助。

标签： css animation

【解决方案1】：

所以在玩了一会儿之后，我想通了，我会留下一个问题的答案，以防有人发现这个问题有一些用处，尽管它不是最好的问题：

所以问题出在旋转关键帧上，我使用了这个：

@keyframes rotateMain {
    42.85%, 57.14% {transform: rotate(360deg);}
}

认为它会将图形从 42.85% 旋转 360 度到 57.14%。下面的代码实际上实现了我想要的：

@keyframes rotateMain {
    42.85% {transform: rotate(0deg);}
    57.14% {transform: rotate(360deg);}
    100% {transform: rotate(360deg);}
}

【讨论】：