自由落體
從高處落下並回彈兩次,模擬重力。
效果預覽
參數調節
完整代碼
/* 自由落體 */
@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; }