跳到主要內容

自由落體

從高處落下並回彈兩次,模擬重力。

效果預覽
參數調節
完整代碼
/* 自由落體 */
@keyframes dropIn {
  0%   { opacity: 0; transform: translateY(-160px); }
    55%  { opacity: 1; transform: translateY(0); }
    70%  { transform: translateY(-24px); }
    85%  { transform: translateY(0); }
    93%  { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

.drop-in { animation: dropIn .9s cubic-bezier(.5,0,.75,0) both; }