맞춤 키 프레임과 함께 애니메이션 속성을 사용하는 것이 좋습니다. 다음은 대략적인 예입니다. 나는 애니메이션에 많은 시간을 할애하지 않았다. 당신의 일 그게 전부)
https://codepen.io/bygrace1986/pen/POypXX
HTML
<div class="logo" data-logo="wp"></div>
CSS
.logo {
position: relative;
width: 2em;
height: 2em;
font-size: 5em;
font-family: arial;
font-weight: bold;
font-style: italic;
text-transform: uppercase;
}
.logo::before, .logo::after {
content: attr(data-logo);
position: absolute;
z-index: -1;
left: 0;
}
.logo::before {
color: red;
animation: rotate 1s infinite;
}
.logo::after {
color: black;
animation: rotate 1s infinite reverse;
}
@keyframes rotate {
0% {
left: 0;
top: 0;
}
25% {
left: 10%;
}
50% {
top: 10%;
}
75% {
left: 0;
}
100% {
top: 0;
}
}
최소한 – storaged