애니메이션 효과 _ 무한대 공

⭐️ 애니메이션 효과 : 무한대로 튀는 공 ⭐️

---

01. 애니메이션 효과

애니메이션(Animation) 효과는 HTML 요소에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 변화시킵니다.
애니메이션은 애니메이션을 나타내는 CSS 스타일과 애니메이션의 연속된 장면(sequence)를 나타내는 복수의 키프레임(@keyframes)들로 이루어집니다.

   ___ 참고하기 ___
  `1   @keyframes : CSS 애니메이션에서 구간을 정하고 각 구간별로 어떤 스타일을 적용시킬지 정합니다.

---

02. 무한대 모양으로 튀는 공

[1] < div > 박스 만들기

div 안에 div 가 있는 구조를 5개 만들어 줍니다.

  <div class="wrapper">
  <div></div>
</div>
<div class="wrapper">
  <div></div>
</div>
<div class="wrapper">
  <div></div>
</div>
<div class="wrapper">
  <div></div>
</div>
<div class="wrapper">
  <div></div>
</div>

---

[2] CSS 설정하기

@keyframes 을 이용하여 애니메이션의 움직임을 조절합니다.

  * {
    box-sizing: border-box;
  }
  body {
    background: linear-gradient(to top, #A18CD1 0%, #FBC2EB 100%);
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  .wrapper {
    position: absolute;
    animation: x 1s ease-in-out alternate infinite 0s both;
  }
  .wrapper:nth-of-type(2) {
    animation-delay: 0.1s;
  }
  .wrapper:nth-of-type(3) {
    animation-delay: 0.2s
  }
  .wrapper:nth-of-type(4) {
    animation-delay: 0.3s
  }
  .wrapper:nth-of-type(5) {
    animation-delay: 0.4s
  }
  .wrapper > div {
    width: 50px;
    height: 50px;
    background-color: #fff;
    border-radius: 100%;
    margin: 40px;
    animation: y 1s linear infinite 0s both;
  }
  .wrapper:nth-of-type(2) > div {
    animation-delay: 0.1s;
    height: 40px;
    width: 40px;
    opacity: 0.8;
  }
  .wrapper:nth-of-type(3) > div {
    animation-delay: 0.2s;
    height: 40px;
    width: 40px;
    opacity: 0.6;
  }
  .wrapper:nth-of-type(4) > div {
    animation-delay: 0.3s;
    height: 40px;
    width: 40px;
    opacity: 0.4;
  }
  .wrapper:nth-of-type(5) > div {
    animation-delay: 0.4s;
    height: 40px;
    width: 40px;
    opacity: 0.2;
  }
  @keyframes x {
    0% {
      transform:translatex(-100px);
    }
    100% {
      transform:translatex(100px);
    }
  }
  @keyframes y {
    25% {
      transform:translatey(-50px);
    }
    0%,50%,100% {
      transform:translatey(0);
    }
    75% {
      transform:translatey(50px);
    }
  }

결과보기