CSS 애니메이션 만들기 : 일렁이는 애니메이션

CSS 애니메이션 : 일렁이는 애니메이션

오늘은 CSS의 다양한 속성을 이용하여 애니메이션을 만들어 보도록 하겠습니다. 애니메이션 이름을 뭐라고 해야 할지 모르겠네요. 작업해볼 애니메이션은 다음과 같습니다.

See the Pen Untitled by mj0614k (@mj0614k) on CodePen.

---

1. HTML(PUG) 소스

div.circle-wrap
    -for (var x = 1; x<=12; x++)
        div.row
        -for (var y = 1; y<=12; y++)
            div.circle

HTML 소스는 반복 작업을 하기 때문에 PUG를 이용하면 수월하게 작업할 수 있습니다. 위 소스는 총 12개의 row 클래스를 가진 div 안에, 각각 12개의 circle 클래스를 가진 div 박스를 만든 것과 같습니다.

2. CSS 소스

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-image: linear-gradient(45deg, #00dbde 0%, #fc00ff 100%);
}

.row {
    display: flex;
}

.row .circle {
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 50%;
    margin: 5px 10px;
    transform-origin: top center;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: scale(1.1) rotate(0deg);
    }
    50% {
        transform: scale(0.2) rotate(180deg);
    }
    100% {
        transform: scale(1.1) rotate(360deg);
    }
}

.row:nth-child(1) .circle {
    animation-delay: 100ms;
}

.row:nth-child(2) .circle {
    animation-delay: 200ms;
}

.row:nth-child(3) .circle {
    animation-delay: 300ms;
}

.row:nth-child(4) .circle {
    animation-delay: 400ms;
}

.row:nth-child(5) .circle {
    animation-delay: 500ms;
}

.row:nth-child(6) .circle {
    animation-delay: 600ms;
}

.row:nth-child(7) .circle {
    animation-delay: 700ms;
}

.row:nth-child(8) .circle {
    animation-delay: 800ms;
}

.row:nth-child(9) .circle {
    animation-delay: 900ms;
}

.row:nth-child(10) .circle {
    animation-delay: 1000ms;
}

.row:nth-child(11) .circle {
    animation-delay: 1100ms;
}

.row:nth-child(12) .circle {
    animation-delay: 1200ms;
}

body에 그라데이션으로 배경색을 주고, flex로 아이템들을 가운데 정렬합니다. 각각의 circle에 너비, 높이값을 부여하고, keyframes를 생성해 줍니다. 마지막으로, circle 애니메이션 각각에 순차적으로 애니메이션 딜레이를 적용해 줍니다.

위의 HTML, CSS 소스를 합치면 애니메이션이 완성됩니다. 간단하죠?