간단한 애니메이션 01

간단한 애니메이션 01

간단한 애니메이션 만들기 첫번째 시간입니다.
둥근모서리의 굴러가는 사각형을 만들어보겠습니다.

---

01. HTML

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

---

02. CSS

{
    body {
        height: 100vh;
        background-image: linear-gradient(to top, skyblue, pink);
      }
      
      .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: yellow;
        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)
        }
      }
}

---

03. 결과물