从左侧滑入主视区，适合抽屉与通知条
← 返回 入场与交互动画 类特效列表上方为纯 CSS 实时演示，直接将鼠标移上去 / 点击感受效果
.fx .sli{width:170px;height:70px;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;animation:kfx-sli 1s cubic-bezier(.25,.46,.45,.94) both}
.fx:hover .sli{animation:kfx-sli 1s cubic-bezier(.25,.46,.45,.94) both}
@keyframes kfx-sli{from{transform:translateX(-140%)}to{transform:translateX(0)}}<div class="fx">
<div class="sli">侧滑入场</div>
</div>