[CSS] 애니메이션 실습 : 움직이는 박스

CSS : 애니메니션 만들기 : 박스

이번 시간에는 CSS실습으로 귀여운 박스 애니메이션을 만들어보겠습니다. 😄

---

#1. HTML

먼저 HTML 코드로 div를 이용하여 박스를 만들어 줍니다.

<div class="box"></div>

---

#2. CSS

다음은 CSS 속성입니다. animation 속성을 사용하여 keyframes에 적용할 애니메이션 명을 작성해주고 그 외 속성을 설정해줍니다.
@keyframes에 속성을 설정할 애니메이션 명을 써준뒤 각 0% ~ 100% 사이에 속성을 부여해줍니다.

body {
  height: 100vh;
  background-image: linear-gradient(to top, Plum, skyblue);
}

.box {
  width: 50px;
  height: 50px;
  position: absolute; /* 위치 잡기 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.box::before {
  content:'';
  width: 50px;
  height: 5px;
  background: #000;
  position: absolute;
  top: 58px;
  left: 0;
  border-radius: 50%;
  opacity: 0.2;
  animation: shadow 0.6s linear infinite; /* 무한으로 돌리기 */
}

@keyframes shadow {
  0% {transform: scale(1, 1);}
  50% {transform: scale(1.2, 1);}
  100% {transform: scale(1, 1);}
}

.box::after {
  content: '';
  background: pink;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 3px;
  animation: load 0.6s linear infinite;
}

@keyframes load {
  17% {
    border-bottom-right-radius: 3px;
  } /* 기본 모양으로 특별한 효과는 없다. */
  25% {
    transform: translatey(9px) rotate(22.5deg);
  }
  50% {
    transform: translatey(18px) scale(1, 0.9)rotate(45deg);
    border-bottom-right-radius: 40px;
  } 
  75%   {
    transform: translatey(9px) rotate(67.5deg);
  }
  100%  {
    transform: translatey(0px) rotate(90deg);
  }
}

---

#3. 결과보기