애니메이션 박스

⭐️ 애니메이션 효과 : 통통 튀는 박스 ⭐️

---

01. 애니메이션 효과

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

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

---

02. 통통 튀는 박스 만들기

[1] < div > 박스 만들기

상자 하나만 만들어주면 됩니다.

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

---

[2] CSS 설정하기

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

  body {
    height: 100vh;
    background-image: linear-gradient(to top, #7FFFD4, #98FB98);    // 그라데이션 배경색 넣기
  }
  .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:	#fff;
    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);
    }
  }

결과보기