[애니메이션효과 만들기] 미역같이 움직이는 원들

미역같이 움직이게 하기

미역마냥 펄럭이는 원의 집합체(?)를 만들어보겠습니다. html을 pug, css는 scss 사용했습니다.

---

■ HTML (PUG)

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

■ CSS (SCSS)

@mixin center {
    display: flex;
    align-items: center;
    justify-content: center;
}
body {
    @include center;
    height: 100vh;
    background-image: linear-gradient(45deg, #00DBDE 0%, #FC00FF 100%)
}
.row {
    display: flex;
.circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 5px 10px;
    background: #fff;
    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)}
}

@for $i from 1 through 12 {
    .row:nth-child(#{$i}) .circle{animation-delay: 100ms * $i}
}

■ 결과