css 关键帧每一步停止一秒

Question

我正在尝试使用关键帧同时旋转和缩放某些内容，但我无法在每一步之后不停止就无法正确完成。

我用 font-size 试过了，但是一个更聪明的人告诉我把它改成 scale，但他不帮我。

body {
    position: relative;
}

.plus {
    position: absolute;
    font-style: normal;
    font-size: 30px;
    font-family: monospace;
    font-weight: bold;

    transform-origin: 50% 50%;
    animation: transform infinite 3s;
    transition: transform 3s ease;
}

@keyframes transform {
    0% {
        transform: scale(1) rotate(0deg);
    }
    25% {
        transform: scale(0.7) rotate(20deg);
    }
    50% {
        transform: scale(0.4);
    }
    75% {
        transform: scale(0.7) rotate(-20deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

<body>
  <div class="plus">
    +
  </div>
</body>

Answer 1

它没有停止，它正在缓和（最后减速）。
您不需要 transition: transform 3s ease; 并且不需要此动画的 "ease"。
您必须将其设置为线性：animation-timing-function: linear;
是的，不要动画 font-size :D

css 关键帧每一步停止一秒

css keyframes stops for a second aber every step

css

animation

keyframe