我們這次主要會依靠2個偽元素 :before & :after
還有animation來完成這次的動畫
:before 作為我們Box主體， :after 作為它的陰影

div.container{
    width: 500px;
    height: 140px;
    background-color: rgb(244, 251, 230);
    position: relative;
}
.box{
    position: relative;
}
/*BOX*/
.box1:before{
    content:'';   /*box要有東西(content)才顯示得出來*/
    background-color: aquamarine;
    position:absolute;
    z-index:2;   /*設置數字較高的z-index會顯示在前*/
    top:60px;
    left:5px;
    width:50px;
    height:50px;
    border-radius:2px;   /*設置圓角*/
  }
  /*陰影*/
  .box1:after{
    content:'';
    position:absolute;
    z-index:1;
    top:128px;
    left:7px;
    width:48px;
    height:4px;
    background:#cec6c6;
    border-radius:100%;
  }

Box和陰影都就緒之後
我們就要來設定它的彈跳

首先是Box的彈跳設定，有在 5% 與 95% 增加 keyframe，為了讓接觸地面時角角才會變圓，可以自己設定玩玩，也不一定要圓角，純粹覺得有圓角很可愛XD

@keyframes jumpBox{ 
        0%{
          top:50px;
        }
        5%{
          border-radius:2px;  /*從 5% 開始變形*/
        }
        50%{
          top:90px; 
          width:60px;
          height:40px;
          border-bottom-right-radius:10px;
          border-bottom-left-radius:10px;
          border-top-right-radius:5px;
          border-top-left-radius:5px;
        }
        95%{
          border-radius:2px;  /*到 95% 恢復原狀*/
        }
        100%{
          top:50px;
        }
    }

記得在Box加上
animation:jumpBox 2s infinite;

再來，陰影部分在跳起來時顏色比較淡也比較小，再接觸時陰影加深寬度也與Box相同

@keyframes shadow{
    0%,100%{
        left:10px;
        width:44px;
        background:#cec6c6;
      }
      50%{
        top:126px;
        left:9px;
        width:50px;
        height:7px;
        background:#8a8989;
      }
}

animation:shadow 2s infinite;

也可以旋轉且彈下來變形，變成圓形:

@keyframes jumpBox{ 
        0%{
          top:50px;
          transform: rotate(90deg); /*旋轉90度*/
        }
        5%{
          border-radius:2px;  
        }
        50%{
          top:80px; 
          width:50px;
          height:50px;
          border-radius:100%; /*變圓形*/
          transform: rotate(45deg);
        }
        95%{
          border-radius:2px;  
        }
        100%{
          top:50px;
          transform: rotate(0deg);
        }
    }
@keyframes shadow{
    0%,100%{
        left:10px;
        width:44px;
        background:#cec6c6;
      }
      50%{
        top:127px; /*微調陰影*/
        left:14px;
        width:30px;
        height:7px;
        background:#8a8989;
      }
}

也可以讓Box跳到對面

@keyframes moveBox {
    0%{
        left: 5px;
    }
    100%{
        left: 445px;
    }
}
@keyframes moveShadow {
    0%{
        left: 15px;
    }
    100%{
        left: 450px;
    }
}

記得在:befor加上去
animation:jumpBox 2s infinite,moveBox 10s ;
:after加上
animation:shadow 2s infinite,moveShadow 10s ;

耶~我們的Box跳起來了!是不是很簡單很有趣呢?
也可以自己玩玩其他設定~來做一個不一樣的動畫吧!