时间戳

首页 > 解决方案 > CSS旋转动画编织无法正常工作

css - CSS旋转动画编织无法正常工作

问题描述

我正在尝试用 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 动画，此时它似乎从动画的开始运行，而不是从它设置开始的位置开始运行，并且它似乎做了额外的旋转。任何帮助表示赞赏，非常感谢。

标签： cssanimation

解决方案

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

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

@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);}
}

推荐阅读