[CSS] 애니메이션04 : 웨이브~~웨이브~~

CSS : 애니메니션 만들기 : 물결 웨~이부~~~ 🌊 🌊

이번 시간에는 CSS 실습으로 원들이 훌랄라 하는 듯한 애니메이션을 만들어보겠습니다. 😄
오늘 실습의 포인트는 퍼그와 SCSS 그리고 반복문입니다~!

---

#1. PUG

다음은 PUG 코드와 컴파일한 HTML 코드 입니다!

🐶 PUG

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

💿 HTML 컴파일 ver

<div class="circle-wrap">
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
  <div class="row">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
  </div>
</div>

---

#2. SCSS

다음은 SCSS 코드와 컴파일한 CSS 코드 입니다!
오늘의 포인트는 mixin입니다. SCSS를 사용할 때 주로 사용하는 패턴으로 코드를 재사용하기 위해서 만들어진 패턴입니다.

🧸 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;}
}

🎀 CSS 컴파일 ver

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;
  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);
  }
}

.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;
}

---