从左侧带倾斜高速飞入，刹停后微回弹
← 返回 入场与交互动画 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .lsi{width:150px;height:70px;margin:56px auto;border-radius:12px;background:linear-gradient(135deg,#57ab5a,#4a9eff);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;animation:kfx-lsi 1.2s ease-out both}
.fx:hover .lsi{animation:kfx-lsi 1.2s ease-out both}
@keyframes kfx-lsi{from{transform:translateX(-130%) skewX(-30deg);opacity:0}60%{transform:translateX(20%) skewX(20deg);opacity:1}80%{transform:translateX(-10%) skewX(-6deg)}to{transform:translateX(0) skewX(0)}}<div class="fx">
<div class="lsi">光速飞入</div>
</div>