[CSS] 공이 정신없이 튀는 애니메이션 만들기

공이 튀는 애니메이션 만들기⚽

이번 포스팅에서는 공이 정신없이🤪🤪🤪 무한으로 튀는 애니메이션을 만들어보도록 하겠습니다.

HTML 코드

<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>

CSS 코드

linear-gradient로 그라디언트 효과 배경을 사용할 수 있으며 position 속성과 animation, @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: 30px;
  width: 30px;
  opacity: 0.6;
}
.wrapper:nth-of-type(4) > div {
  animation-delay: 0.3s;
  height: 20px;
  width: 20px;
  opacity: 0.4;
}
.wrapper:nth-of-type(5) > div {
  animation-delay: 0.4s;
  height: 10px;
  width: 10px;
  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);
  }
}

결과물

정신없이 튀는 공 애니메이션 완성입니다~🤪 아이고 정신없다^^