CSS Animation - 我怎样才能让这个动画更流畅？答案

【问题标题】：CSS Animation - How can I make this animation more fluently?CSS Animation - 我怎样才能让这个动画更流畅？
【发布时间】：2017-05-09 20:25:50
【问题描述】：

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

我想重新创建this animation，这是一个用 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>

【问题讨论】：

为什么这被否决了？
@JonasGiuro 确切的原因是这样的：“寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及必要的最短代码在问题本身中重现它。没有明确问题陈述的问题对其他读者没有用。请参阅：How to create a Minimal, Complete, and Verifiable example."。我不同意关闭的尝试。最小的例子就在那里。只需要将它从 fiddle 移到堆栈 sn-p。
我将问题编辑为堆栈 sn-p。
试试这个答案：jsfiddle.net/dalinhuang/qxfdxh46/1

标签： html css css-animations

【解决方案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>

【讨论】：

视情况而定，我将静态方块作为参考，但我明白你的意思。

【解决方案2】：

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

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

这是导致问题的原因。对于中间没有小“停止”的动画。尝试改用线性：

animation-timing-function: linear;

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

正如所指出的那样，您似乎也使动画过于复杂。尝试使用：

animation-direction: alternate;

而不是向前和向后设置动画。

【讨论】：