0
キーフレームを使用して同時に何かを回転させたりスケールしたりしようとしていますが、cssキーフレームがステップごとに2回目のアベレージで停止する
私はフォントサイズで試しましたが、よりスマートな人間がそれを縮尺変更するように言われましたが、彼は私を助けません。
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>