dot 스핀
@keyframes dotAnimation {
50% {
transform: rotate(0.5turn);
}
100% {
transform: rotate(0.5turn);
}
}
<div class="dots box">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
건반물결
@keyframes lineAnim {
0% {
transform: none;
}
25% {
transform: scaleY(2);
}
50%,
100% {
transform: none;
}
}
.line {
width: 20px;
height: 80px;
background-color: white;
animation: lineAnim 1s ease-in-out infinite;
}
.line:nth-child(2) {
animation-delay: 0.1s;
}
.line:nth-child(3) {
animation-delay: 0.2s;
}
.line:nth-child(4) {
animation-delay: 0.3s;
}
.line:nth-child(5) {
animation-delay: 0.4s;
}