振荡动画 CSS：如何避免从 100% 突然过渡到 0%？

Question

我正在尝试使用 css 制作振荡动画，如下所示：

这是我创建动画的方式：

@keyframes rotateFeather {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-180deg);
    }
    50% {
        transform: rotate(-90deg);
    }
    75% {
        transform: rotate(90deg);
    }
    100% {
        transform: rotate(180deg);
    }
}

这是我的 class：（使用 sccs）

.logo {
    height: 5rem;
    transition: all 0.3s ease;

    &box {
        position: absolute;
        top: 4rem;
        left: 4rem;
    }

    &:hover {
        animation-name: rotateFeather;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
}

我遇到了这个问题：当它在 100% 时达到 180 度时，它突然重置为 0，我想让它平滑。

怎么可能做到同样的事情？

Answer 1

为了确保平滑过渡，我们需要确保 0% 和 100% 的变换必须与原始状态匹配：

@keyframes rotateFeather {
    0% {
        transform: rotate(0deg); //-30
        transform-origin: bottom;
    }
    20% {
        transform: rotate(-30deg); //-60
        transform-origin: bottom;
    }
    40% {
        transform: rotate(0deg); //-30
        transform-origin: bottom;
    }
    60% {
        transform: rotate(30deg); // 0
        transform-origin: bottom;
    }
    80% {
        transform: rotate(60deg); //30
        transform-origin: bottom;
    }
    100% {
        transform: rotate(0deg); //30
        transform-origin: bottom;
    }
}

这帮助我解决了我的问题。我不确定，如果我需要在每个阶段添加 transform-origin，如果有人可以对此进行更详细的说明，那将会有所帮助。

Answer 2

这是您最新动画代码的简化版本（带有 Codepen 以查看实际效果）：

@keyframes rotateFeather {
    0% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(-30deg);
    }
    80% {
        transform: rotate(60deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.logo {
    transform-origin: bottom;

    &:hover {
        animation: rotateFeather 1s linear infinite;
    }
}

关于上述调整的一些要点：

您不需要在每个关键帧处 transform-origin。您可以全局设置它。
您可以将所有动画属性滚动到一个 shorthand 规则中。
您可以跳过以数学方式插值动画的关键帧（请注意，我省略了上面的 40% 和 60%，它们看起来是一样的）。
对于使用关键帧设置动画的元素，您不需要任何过渡规则。除非你将它用于其他用途，但你要小心避免尝试同时使用 animation 和 transition 在同一元素上设置相同的属性动画，因为它会打破有问题的动画。

振荡动画 CSS：如何避免从 100% 突然过渡到 0%？

Oscilatory Animation CSS: How to avoid abrupt transition from 100% to 0%?

css

css-animations

css-animation-direction