CSS 动画 - 如何使此动画更流畅

Question

首先，我不打算使用Javascript。纯粹用HTML和CSS完成。

我想重新创建这个动画，它是用AE制作的gif，纯粹是用CSS制作的。这就是我现在所拥有的，但正如你所看到的，它在中间变慢并产生一种奇怪的延迟感觉，任何人都知道我如何摆脱它(这可能是@keframes放置/使用不当的东西(？

.kader {
    width: 85px;
    height: 85px;
    border-color: black;
    border-style: solid;
    border-width: 2px;
    margin: 60px 30px;
    position: absolute;
    animation-delay: 0s;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    transform-origin: center;
}
.k1 {
    animation-name: animation_k1;
    transform: rotate(45deg);
}
.k2 {
    animation-name: animation_k2;
}
.k3 {
    animation-name: animation_k3;
}
.k4 {
    animation-name: animation_k4;
}
.k5 {
    animation-name: animation_k5;
}
@keyframes animation_k1 {
    0% {
        transform: rotate(45deg);
    }
    25% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(45deg);
    }
    75% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

<div id="animatie">
            <div class="kader k1"></div>
            <div class="kader k2"></div>
            <div class="kader k3"></div>
            <div class="kader k4"></div>
            <div class="kader k5"></div>
        </div>

Answer 1

你把

事情复杂化了，你所需要的只是animation-direction: alternate;

.kader {
    width: 85px;
    height: 85px;
    border-color: black;
    border-style: solid;
    border-width: 2px;
    margin: 60px 30px;
    position: absolute;
    animation-delay: 0s;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
    transform-origin: center;
}
.k1 {
    animation-name: animation_k1;
    transform: rotate(45deg);
}
.k2 {
    animation-name: animation_k2;
}
.k3 {
    animation-name: animation_k3;
}
.k4 {
    animation-name: animation_k4;
}
.k5 {
    animation-name: animation_k5;
}
@keyframes animation_k1 {
    0% {
        transform: rotate(-45deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

<div id="animatie">
            <div class="kader k1"></div>
            <div class="kader k2"></div>
            <div class="kader k3"></div>
            <div class="kader k4"></div>
            <div class="kader k5"></div>
        </div>

Answer 2

如果我正确理解您的问题，那就是您的：

animation-timing-function: ease-in-out;

这导致了问题。对于中间没有小"停止"的动画。尝试使用线性代替：

animation-timing-function: linear;

您也可以尝试创建自己的自定义贝塞尔曲线，以获得恰到好处的时机。

正如所指出的，您似乎也使动画复杂化了。尝试使用：

animation-direction: alternate;

而不是同时向前和向后动画。