Wave Animation

Wave Animation

codepen에서 원들이 웨이브를 하는 애니메이션을 만들었습니다.

01. HTML

pug를 사용해 for문으로 많은 박스를 만들어줍니다.

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

02. css

원들 에게 애니메이션을 줄 때, 한번에 많은 수를 움직이는 것을 해야하니 scss로 for문을 사용해 여러개의 nth-child를 한 문장으로 해결할 수 있게 하였습니다.

@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.1) 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
    // }
    @for $i from 1 through 12 {
      .row:nth-child(#{$i}) .circle {
        animation-delay: 100ms * $i
      }
    }