Entrance Motion
A group of elements fades and rises in, one after another, like a queue
Live preview (drag the parameters, watch it change)
Code
<script>
// 一组元素逐个入场（Web Animations API，无需任何库）
document.querySelectorAll('.enter-item').forEach((el, i) => {
el.animate(
[{ opacity: 0, transform: 'translateY(26px)' }, { opacity: 1, transform: 'none' }],
{ duration: 600, delay: i * 90, easing: 'cubic-bezier(0.22,1,0.36,1)', fill: 'backwards' }
);
});
</script><!-- 纯 CSS 版：给每个元素加类并递增 animation-delay -->
<div class="animate-[enter_.6s_cubic-bezier(.22,1,.36,1)_both]">…</div>
<!-- tailwind.config 补 keyframes enter: { from: { opacity: 0, transform: 'translateY(26px)' } } -->
<!-- 第 n 个元素再加 [animation-delay:90ms]、[animation-delay:180ms]… -->export function EnterGroup({ children }) {
const ref = React.useRef(null);
React.useEffect(() => {
ref.current.querySelectorAll('[data-enter]').forEach((el, i) => {
el.animate(
[{ opacity: 0, transform: 'translateY(26px)' }, { opacity: 1, transform: 'none' }],
{ duration: 600, delay: i * 90, easing: 'cubic-bezier(0.22,1,0.36,1)', fill: 'backwards' });
});
}, []);
return <div ref={ref}>{children}</div>;
}Code snippets are MIT-licensed — copy and adapt freely.
How this effect works
它是怎么工作的（中文）
每个元素从「透明 + 偏移 20 多像素」动到原位，相邻元素延迟几十毫秒，就成了队列感。曲线选 ease-out-expo 最稳妥：快起慢停，眼睛觉得利落。延迟别超过每个 120ms、总数别超过 8 个，否则用户会觉得页面在「表演」而不是在「响应」。
How it works (English)
Each element animates from transparent + ~24px offset to its resting place, staggered by a few dozen milliseconds — that delay is what creates the queue feel. Ease-out-expo is the safest curve: fast start, gentle landing. Keep per-item delay under ~120ms and total items under ~8, or the page feels like it's performing instead of responding.
参考与来源 Sources
本条为「批次 1（重建）」成果（2026-11-10 用户决定：原 妞妞老师 素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与 妞妞老师 原始素材无关。