공 튀기기

🌲 @keyframes

from (or 0%) 속성에 설정한 스타일에서 출발해 to (or 100%)에 설정한 스타일로 점차 바뀌면서 진행된다

🌲 코드

<style>
   @keyframes ball {
      0% { top:0px; }
      95% { width: 100px; }
      to {
         top:200px;
         width:100px;
         height:100px;
      } 
   }

   .box {
      width: 200px;
      height: 200px;
      border: 1px solid rgb(211, 208, 74);
      margin: 80px;
   }

   .ball {
      position:relative;
      left: 100px;
      top:0;
      width:100px;
      height:100px;
      border-radius:50%;
      background:#000;
      /* Infinite(무한 반복) / Alternate(순방향으로 애니메이션을 시작해서 역방향으로 번갈아 애니메이션 재생) */
      animation:ball 0.5s ease-in Infinite Alternate;
      transform: translateZ(-100px);
   }
</style>
<div class="box">
   <div class="ball"></div>
</div>

🌲 공 모양에 변화를 줘볼까

Keyframes 건드려보기

   @keyframes ball {
      0% { top:0px; }
      95% { width: 100px; }
      to {
         top:200px;
         width:100px;
         height:50px;
      } 
   }

바닥 부분에서 공이 눌리는 것 같은 모양으로 변하면서 좀 더 쫀득해졌다