自由落体
从高处落下并回弹两次,模拟重力。
效果预览
参数调节
完整代码
/* 自由落体 */
@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; }