Elastic / Bounce
模拟物理受力和回弹节奏的动画,为交互增添趣味和连接感。通过精心调校的 cubic-bezier 曲线还原真实物理质感。
/* 弹跳动画 - 模拟重力 */
@keyframes bounceAnim {
0%, 100% { transform: translateY(0);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
50% { transform: translateY(-60px);
animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}
/* 弹性 cubic-bezier */
.spring-item {
transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* 果冻变形 */
@keyframes jellyAnim {
25% { transform: scale(0.9, 1.1); }
50% { transform: scale(1.1, 0.9); }
75% { transform: scale(0.95, 1.05); }
}
← 返回索引