박스가 움직이는 애니메이션

박스가 움직이는 애니메이션

codepen에서 굴러가는 박스를 만들어보았습니다.

01. HTML

정직하게 정말 박스 하나만 있습니다.

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

02. css

박스와, 그림자에 부여하는 것 빼고는 키프레임으로 움직임을 부여하면 되는 간단한 애니메이션입니다.

     body {
        height: 100vh;
        background-image: linear-gradient(to top, #9048d4,#18cfd7);
      }
      .box {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        margin: auto;
      }
      
      .box::before {
        content: '';
        width: 50px;
        height: 5px;    
        background-color: #000;
        position: absolute;
        top: 58px;
        left: 0;
        border-radius: 50%;
        opacity: 0.2;
        animation: shadow 0.6s liner infinite;
      }
      
      @keyframes shadow {
        0% {
          trasform : scale(1,1);
        }
        50% {
          trasform : scale(1.2 ,1);
        }
        100% {
          trasform : scale(1,1);
        }
      }
      
      .box::after {
        content : '';
        background-color: #fff;
        height: 50px;
        width: 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);
        }
      }