CSS 애니메이션 - 꿀렁이는 원

CSS 애니메이션 연습하기

원이 꿀렁이는 애니메이션을 만들어보겠습니다.

---

결과

HTML(PUG)

PUG를 사용했습니다. HTML로 보고싶으시다면 코드팬에서 컴파일 해보시기 바랍니다.

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

CSS(SCSS)

SCSS를 사용했습니다. mixin은 여러 여러 컴포넌트 간에 공통으로 사용하고 있는 로직, 기능들을 재사용하는 방법 정도로만 알고계시면 될거같습니다. 애니메이션 효과는 보기와 같이 줍시다.

@mixin center {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body {
    @include center;
    height: 100vh;
    background-image: linear-gradient(45deg, black 0%, #fc00ff 100%);
  }
  .row {
    display: flex;
    .circle {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #fff;
      transform-origin: top center;
      margin: 4px;
      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}
  @for $i from 1 through 12 {
    .row:nth-child(#{$i}) .circle {animation-delay: 100ms * $i}}

참쉽죠?

코드팬 보기