悬停时大幅平移摆动后回正，弹簧式余震
← 返回 入场与交互动画 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .wbl{width:120px;height:80px;margin:56px auto;border-radius:12px;background:linear-gradient(135deg,#f7c873,#e78a3e);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.fx:hover .wbl{animation:kfx-wobble 1s ease-in-out}
@keyframes kfx-wobble{0%,100%{transform:translateX(0)}15%{transform:translateX(-25%) rotate(-5deg)}30%{transform:translateX(20%) rotate(3deg)}45%{transform:translateX(-15%) rotate(-3deg)}60%{transform:translateX(10%) rotate(2deg)}75%{transform:translateX(-5%) rotate(-1deg)}}<div class="fx">
<div class="wbl">悬停摆动</div>
</div>