CSS 애니메이션 02

CSS3(keyframes, transform, translate, animation)을 이용한 Dot Animation Effect.

/* css */
body {
    height: 100vh;
    margin: 0;
    padding: 0;
    background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}

.loading {
    width: 20px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    animation: loading ease-in-out 2s 100;
}

.loading .circle1 {
    border-radius: 50%;
    background: #fff;
    width: 20px;
    height: 20px;
}

.loading .circle2 {
    border-radius: 50%;
    background: #fff;
    width: 20px;
    height: 20px;
    margin-top: 60px;
}

@keyframes loading {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

<!-- HTML -->
<div class="loading">
    <div class="circle1"></div>
    <div class="circle2"></div>
</div>

---

REFERENCE
https://www.youtube.com/watch?v=mIW-htccaoo