悬停时缩放带旋转的连续弹跳，animate.style 的 tada
← 返回 入场与交互动画 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .tda{width:120px;height:80px;margin:56px auto;border-radius:12px;background:linear-gradient(135deg,#a371f7,#4a9eff);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.fx:hover .tda{animation:kfx-tada 1s ease-in-out}
@keyframes kfx-tada{0%{transform:scale(1)}10%,20%{transform:scale(.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale(1.1) rotate(3deg)}40%,60%,80%{transform:scale(1.1) rotate(-3deg)}to{transform:scale(1) rotate(0)}}<div class="fx">
<div class="tda">悬停 Tada</div>
</div>