文章目录每日一句正能量摘要一、动画不是装饰而是叙事二、Hero 区三段式入场从背景到行动的叙事链2.1 第一阶段背景径向渐变展开0–300ms2.2 第二阶段标题 fade-up300–600ms2.3 第三阶段CTA 按钮 scale-in600–900ms三、滚动触发的 Feature 卡片GSAP ScrollTrigger 实战3.1 ScrollTrigger 的触发点配置3.2 为什么使用 GSAP 而非纯 CSS四、按钮微交互Hover 与 Click 的反馈设计4.1 Hover 状态150ms 的 ease-out 过渡4.2 Click 状态100ms 的 scale(0.98)五、性能铁律只动画 transform 与 opacity六、无障碍降级prefers-reduced-motion6.1 CSS 层面的全局降级6.2 JavaScript 动画的降级处理6.3 Framer Motion 的 reducedMotion 支持七、Framer Motion 的 Stagger 配置声明式动画编排八、性能验证Chrome DevTools Performance 面板结语每日一句正能量当你变强了世界自然会对你保持尊重。个人的能力、价值和能量是赢得平等对话权与基本尊重的前提。将焦点从外部抱怨转向内在建设因为自身强大才是解决大多数问题的钥匙。摘要当你第一次打开 Codex 官网背景的光晕从中心缓缓扩散标题从下方轻盈上浮CTA 按钮在最后一刻优雅地缩放入场——这不是随意的动效堆砌而是一场精确到毫秒的「动画交响乐」。本文将拆解 Codex 官网的微交互动画编排逻辑从 Hero 区的三段式入场到滚动触发的 stagger 动画给出完整的时序设计与工程化实现。一、动画不是装饰而是叙事很多前端开发者将动画视为「锦上添花」但在 Codex 这类以技术公信力为核心的产品页中动画承担着引导注意力、建立层级、传递品牌质感的三重使命。一个精心编排的入场动画能够在用户尚未阅读任何文字之前就建立起「这个产品很精致」的第一印象。动画编排的核心挑战在于时序Timing。如果所有元素同时入场页面会显得杂乱无章如果间隔过长用户会在等待中流失。Codex 官网的解决方案是将动画按叙事节奏分层每一层负责传递一个信息层与层之间保持 200-300ms 的呼吸间隔。二、Hero 区三段式入场从背景到行动的叙事链Codex 官网的 Hero 区域采用了经典的三段式入场编排总时长控制在 900ms 以内恰好处于人类感知「即时响应」的心理阈值1 秒之下。2.1 第一阶段背景径向渐变展开0–300ms背景是用户视线最先接触的区域。Codex 使用了从中心向四周扩散的径向渐变光晕模拟「能量汇聚」的视觉效果。这一阶段的动画只涉及opacity和transform: scale()完全运行在浏览器的合成器线程上不会阻塞主线程的解析与渲染。// components/HeroBackground.tsx use client; import { useEffect, useRef } from react; export function HeroBackground() { const canvasRef useRefHTMLDivElement(null); useEffect(() { const el canvasRef.current; if (!el) return; // 使用 CSS 动画而非 JS 定时器确保与浏览器渲染帧同步 el.style.opacity 1; el.style.transform scale(1); }, []); return ( div ref{canvasRef} classNameabsolute inset-0 pointer-events-none style{{ background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(16, 163, 127, 0.12) 0%, transparent 70%), opacity: 0, transform: scale(0.85), transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.22, 1, 0.36, 1), }} / ); }这里使用了cubic-bezier(0.22, 1, 0.36, 1)这个缓动曲线——它是一种「先快后慢」的 ease-out 变体让光晕在展开末期自然减速避免机械感。2.2 第二阶段标题 fade-up300–600ms标题是 Hero 区的信息核心。Codex 采用了「从下方淡入上浮」的经典模式但细节在于标题的每一行都有独立的动画延迟形成微妙的 stagger 效果。// components/HeroTitle.tsx use client; import { useEffect, useState } from react; const titleLines [ 由 AI 驱动的编程助手, 让代码编写如对话般自然, ]; export function HeroTitle() { const [visible, setVisible] useState(false); useEffect(() { const timer setTimeout(() setVisible(true), 300); return () clearTimeout(timer); }, []); return ( h1 classNamerelative z-10 text-center {titleLines.map((line, index) ( span key{index} classNameblock overflow-hidden span classNameblock transition-all duration-700 style{{ transform: visible ? translateY(0) : translateY(100%), opacity: visible ? 1 : 0, transitionTimingFunction: cubic-bezier(0.22, 1, 0.36, 1), transitionDelay: ${300 index * 100}ms, }} {line} /span /span ))} /h1 ); }关键细节外层overflow-hidden配合内层translateY(100%) → 0实现「从遮罩下方滑出」的效果比单纯的opacity变化更有质感。每行之间的transitionDelay差值为 100ms形成自然的阅读节奏引导。2.3 第三阶段CTA 按钮 scale-in600–900msCTACall to Action按钮是 Hero 区的最终目标。它的入场时机被刻意安排在背景和标题之后确保用户的注意力已经被引导到正确的位置。// components/HeroCTA.tsx use client; import { useEffect, useState } from react; export function HeroCTA() { const [visible, setVisible] useState(false); useEffect(() { const timer setTimeout(() setVisible(true), 600); return () clearTimeout(timer); }, []); return ( div classNamerelative z-10 mt-8 transition-all duration-500 style{{ transform: visible ? scale(1) translateY(0) : scale(0.9) translateY(20px), opacity: visible ? 1 : 0, transitionTimingFunction: cubic-bezier(0.34, 1.56, 0.64, 1), // 轻微的 overshoot 弹性 transitionDelay: 600ms, }} button classNamepx-8 py-3 bg-accent text-inverse rounded-lg font-medium hover:bg-accent-hover transition-colors 开始使用 Codex /button /div ); }这里使用了cubic-bezier(0.34, 1.56, 0.64, 1)——一个带有轻微 overshoot过冲的弹性缓动让按钮在缩放到位时产生「落定」的物理感增强点击欲望。以下这张图完整展示了 Hero 区三段式入场的时序编排三、滚动触发的 Feature 卡片GSAP ScrollTrigger 实战Hero 区以下的内容区域Codex 官网使用了滚动触发的 stagger 动画来展示功能特性。当用户滚动到 Feature 区域时卡片依次以 0.1 秒的间隔淡入上浮形成「内容随着滚动逐渐揭晓」的叙事效果。3.1 ScrollTrigger 的触发点配置GSAP 的 ScrollTrigger 插件提供了精确的滚动位置控制。Codex 官网的配置逻辑是当卡片顶部到达视口 80% 位置时触发动画这样既不会让用户等待太久也不会在元素尚未进入视野时就开始动画。// components/FeatureCards.tsx use client; import { useEffect, useRef } from react; import gsap from gsap; import { ScrollTrigger } from gsap/ScrollTrigger; gsap.registerPlugin(ScrollTrigger); const features [ { title: 自然语言编程, desc: 用中文描述需求Codex 生成代码 }, { title: 多语言支持, desc: Python、JavaScript、Go 等主流语言 }, { title: 实时预览, desc: 边写边看即时验证代码效果 }, { title: 智能补全, desc: 基于上下文的代码建议与补全 }, ]; export function FeatureCards() { const containerRef useRefHTMLDivElement(null); useEffect(() { const ctx gsap.context(() { // 获取所有卡片元素 const cards gsap.utils.toArrayHTMLElement(.feature-card); gsap.fromTo( cards, { y: 60, opacity: 0, }, { y: 0, opacity: 1, duration: 0.8, ease: power3.out, stagger: 0.1, // 每张卡片间隔 100ms scrollTrigger: { trigger: containerRef.current, start: top 80%, // 容器顶部到达视口 80% 时触发 end: bottom 20%, toggleActions: play none none none, // 只播放一次 // markers: true, // 调试用显示触发线 }, } ); }, containerRef); return () ctx.revert(); // 清理动画与 ScrollTrigger 实例 }, []); return ( div ref{containerRef} classNamegrid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto px-6 py-24 {features.map((feature, index) ( div key{index} classNamefeature-card bg-secondary border border-border rounded-xl p-8 hover:border-border-focus transition-colors h3 classNametext-primary text-xl font-medium mb-3{feature.title}/h3 p classNametext-secondary leading-relaxed{feature.desc}/p /div ))} /div ); }3.2 为什么使用 GSAP 而非纯 CSSCSS 的scroll-timeline和animation-timeline虽然可以实现滚动驱动动画但目前的浏览器兼容性尤其是 Safari仍然不足。GSAP ScrollTrigger 的优势在于跨浏览器一致性所有现代浏览器表现一致。精确控制可以设置scrub: true实现滚动位置与动画进度的 1:1 映射也可以像上文那样使用触发点模式。自动清理ctx.revert()在组件卸载时自动移除所有 ScrollTrigger 实例避免内存泄漏。四、按钮微交互Hover 与 Click 的反馈设计按钮是用户与页面交互最频繁的元素其微交互设计直接影响「这个产品是否跟手」的感知。4.1 Hover 状态150ms 的 ease-out 过渡/* styles/interactions.css */.btn-interactive{transition:transform 150ms ease-out,background-color 150ms ease-out,box-shadow 150ms ease-out;}.btn-interactive:hover{transform:translateY(-1px);box-shadow:0 4px 12pxrgba(16,163,127,0.25);}.btn-interactive:active{transform:scale(0.98)translateY(0);transition-duration:100ms;}设计要点translateY(-1px)的微小上浮暗示「可点击」但幅度必须极小1-2px否则会显得轻浮。box-shadow的变化模拟光源照射下的物理抬升。Hover 过渡时长 150ms处于人类感知「即时反馈」的最佳区间100-200ms。4.2 Click 状态100ms 的 scale(0.98)点击时的scale(0.98)模拟了物理按钮被按下的凹陷感。时长缩短到 100ms因为点击是一个快速动作过长的动画会让用户感觉「滞后」。// components/InteractiveButton.tsx use client; export function InteractiveButton({ children, onClick }: { children: React.ReactNode; onClick?: () void }) { return ( button onClick{onClick} classNamerelative px-6 py-3 bg-accent text-inverse rounded-lg font-medium transition-all duration-150 ease-out hover:-translate-y-0.5 hover:shadow-glow active:scale-[0.98] active:duration-100 {children} /button ); }五、性能铁律只动画 transform 与 opacity动画性能的核心在于浏览器渲染管线。一个完整的渲染帧需要经历以下阶段JavaScript → Style → Layout → Paint → CompositeLayout布局计算元素的几何位置如width、height、top、left。这是最昂贵的阶段。Paint绘制填充像素如background-color、box-shadow。Composite合成将图层合并为最终画面。transform和opacity可以完全在此阶段完成。Codex 官网的所有动画都严格遵循这一原则可动画属性避免使用的属性transformtranslate, scale, rotatewidth,height,top,leftopacitymargin,padding,border-widthfilter谨慎使用会触发 Paintbackground-color会触发 Paint如果确实需要动画background-color如主题切换应当使用 CSS 变量并在父级元素上统一过渡而非在单个组件上频繁触发。六、无障碍降级prefers-reduced-motion并非所有用户都能享受动画。对于患有前庭功能障碍vestibular disorders的用户过多的动画会导致眩晕和不适。Codex 官网应当尊重用户的系统偏好提供无动画的降级方案。6.1 CSS 层面的全局降级/* styles/accessibility.css */media(prefers-reduced-motion:reduce){*, *::before, *::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important;}}这段代码的核心逻辑是将所有的animation-duration和transition-duration强制设为0.01ms。这个值足够小以至于人眼无法感知动画但又足够大以避免某些浏览器在0ms时的渲染 bug。6.2 JavaScript 动画的降级处理对于 GSAP 等 JavaScript 驱动的动画需要在初始化时检测用户偏好// hooks/useReducedMotion.ts import { useState, useEffect } from react; export function useReducedMotion(): boolean { const [reduced, setReduced] useState(false); useEffect(() { const mql window.matchMedia((prefers-reduced-motion: reduce)); setReduced(mql.matches); const handler (e: MediaQueryListEvent) setReduced(e.matches); mql.addEventListener(change, handler); return () mql.removeEventListener(change, handler); }, []); return reduced; }// 在 FeatureCards 中使用 const reduced useReducedMotion(); useEffect(() { if (reduced) return; // 如果用户偏好减少动画跳过 GSAP 初始化 const ctx gsap.context(() { // ... GSAP 动画配置 }, containerRef); return () ctx.revert(); }, [reduced]);6.3 Framer Motion 的 reducedMotion 支持如果你使用 Framer Motion它内置了对prefers-reduced-motion的支持// components/AnimatedCard.tsx use client; import { motion } from framer-motion; const cardVariants { hidden: { y: 60, opacity: 0 }, visible: { y: 0, opacity: 1 }, }; export function AnimatedCard({ children }: { children: React.ReactNode }) { return ( motion.div initialhidden whileInViewvisible viewport{{ once: true, margin: -20% }} variants{cardVariants} transition{{ duration: 0.8, ease: [0.22, 1, 0.36, 1], // 自定义 cubic-bezier }} // Framer Motion 会自动检测 prefers-reduced-motion // 也可以通过 reducedMotionuser 显式启用 reducedMotionuser {children} /motion.div ); }七、Framer Motion 的 Stagger 配置声明式动画编排对于偏好 React 生态的开发者Framer Motion 提供了更声明式的 stagger 实现方式// components/StaggerContainer.tsx use client; import { motion } from framer-motion; const containerVariants { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.1, // 子元素间隔 100ms delayChildren: 0.3, // 容器动画后延迟 300ms 开始子元素 duration: 0.5, }, }, }; const itemVariants { hidden: { y: 40, opacity: 0 }, visible: { y: 0, opacity: 1, transition: { duration: 0.7, ease: [0.22, 1, 0.36, 1], }, }, }; export function StaggerContainer() { return ( motion.div variants{containerVariants} initialhidden whileInViewvisible viewport{{ once: true, amount: 0.3 }} classNamegrid grid-cols-1 md:grid-cols-3 gap-6 {[1, 2, 3].map((i) ( motion.div key{i} variants{itemVariants} classNamebg-secondary border border-border rounded-xl p-6 div classNamew-12 h-12 bg-accent/10 rounded-lg mb-4 / h3 classNametext-primary font-medium mb-2特性 {i}/h3 p classNametext-secondary text-sm功能描述文案/p /motion.div ))} /motion.div ); }Framer Motion 的variants系统让动画编排变得像写状态机一样清晰。父容器的staggerChildren和delayChildren控制了整体节奏子元素的variants定义了个体行为两者解耦又协同。八、性能验证Chrome DevTools Performance 面板动画写完后必须通过 Performance 面板验证其实际表现。验证步骤如下打开 Chrome DevTools → Performance 标签。勾选「Screenshots」和「Web Vitals」。点击录制按钮刷新页面并等待 Hero 动画完成。停止录制观察以下指标Main 线程占用应当保持较低没有长任务Long Task。Compositor 线程transform和opacity动画应当完全在此线程运行。Layout Shift确认没有意外的布局偏移。如果观察到 Paint 或 Layout 阶段的橙色条块说明某个动画触发了重排或重绘需要回溯检查是否使用了非合成器属性。结语Codex 官网的动画之所以「感觉舒服」不是因为用了多么复杂的技术而是因为每一个动画都有明确的叙事目的、精确的时序控制和严格的性能边界。从 Hero 区 900ms 的三段式入场到滚动触发的 stagger 卡片再到按钮的 150ms hover 反馈——这些数字背后是对用户体验的深刻尊重。动画编排的本质是「时间的设计」。当你开始用毫秒为单位思考用户的视觉旅程时你的产品就已经超越了功能的堆砌进入了体验的维度。转载自https://blog.csdn.net/sghtgjfhv/article/details/163981682欢迎 点赞✍评论⭐收藏欢迎指正