淡入滑动 | wjs-css-effects

从下向上

从上向下

从右向左

从左向右

关键点

淡入滑动组合了 opacity 透明度变化和 translate 位移动画
初始状态元素透明且向某方向偏移（如上、下、左、右），结束状态回到原位并完全显现
使用 transition 同时过渡多个属性，语法上用逗号分隔即可
四方向变体只需改变 translateY 或 translateX 的正负值和初始位置
位移距离通常在 20-40px，配合 0.3-0.5s 时长，视觉上轻盈不拖沓

效果说明

元素淡入 + 位移的入场动画，展示 4 个方向（上/下/左/右）。初始状态透明并沿方向偏移，添加 .play 后执行 fsIn 动画，opacity 与 transform 同时过渡到终态。方向用 CSS 变量 --tx/--ty 区分，共用一组关键帧，代码极简。

CSS

JavaScript