Question

我正在尝试使用关键帧同时旋转和缩放某些内容，但我不能在每个步骤后停止都不正确。

我尝试使用font-size，但是一个聪明的人告诉我要将它改成比例，但他不会帮助我。

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;，并且您不希望此动画“轻松” 您必须将其设置为线性：animation-timing-function: linear;
是的，不要为font-size制作动画：D

每一步css关键帧停止第二次像素

1 个答案: