원이 펄럭이는 애니메이션 만들어보기!

웨이브 애니메이션 주기!

PUG와 SCSS를 통해 원을 생성하고 그 원이 펄럭이는듯한 애니메이션을 구현해보도록 하겠습니다!

HTML 코드 : PUG를 사용

이번 예제는 PUG를 사용하여 HTML 보다 효율적으로 작업 해보겠습니다
각 원을 만들어주기 위해 for문을 통해 반복시켜 생성해줍니다.

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

---

CSS 코드 : SCSS를 사용

1. SCSS를 사용해 각 줄 마다 만들어준 원을 flex를 통해 일렬로 정렬한 뒤
2. 한줄마다 똑같은 방식으로 스타일을 지정해줍니다.
3. 그리고 각 줄의 circle(원은 애니메이션에 딜레이를 주어 펄럭이는 느낌을 줍니다
4. 또한 각 원에 애니메이션을 설정해 각각의 애니메이션이 다르게 나타나게 해줍니다.

@mixin center {
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
  @include center;
  height: 100vh;
  background-image: linear-gradient(45deg, #999 0%, #121 100%)
}

.row {
  display: flex;
  .circle {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 5px;
    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)}
  }
  // .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}
}

---