0
Я пытаюсь повернуть и масштабировать что-то одновременно с ключевыми кадрами, но я не могу получить его правильно, не останавливаясь после каждого шага.css keyframes останавливается на второй шаг каждый шаг
Я попробовал его с размером шрифта, но более умный человек сказал мне изменить его на масштаб, но он не поможет мне.
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>