animation-micro-interaction-pack

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Animation & Micro-interaction Pack

动画与微交互工具包

Create polished, performant animations and micro-interactions.

打造精致、高性能的动画与微交互效果。

Animation Patterns

动画模式

Hover Effects: Scale, lift (translateY), glow (box-shadow), color shifts Entrance: Fade-in, slide-in, zoom-in with stagger for lists Exit: Fade-out, slide-out, scale-out Loading: Pulse, skeleton waves, progress bars Gestures: Ripple on click, drag feedback, swipe indicators

悬停效果：缩放、上移（translateY）、发光（box-shadow）、颜色渐变 入场动画：淡入、滑入、缩放进入，支持列表 stagger 动画 退场动画：淡出、滑出、缩放退出 加载动画：脉冲、骨架屏波浪、进度条 手势反馈：点击涟漪、拖拽反馈、滑动指示器

Tailwind Animations

Tailwind 动画配置

css

/* tailwind.config.js */
animation: {
  'fade-in': 'fadeIn 0.5s ease-out',
  'slide-up': 'slideUp 0.3s ease-out',
  'scale-in': 'scaleIn 0.2s ease-out',
}

css

/* tailwind.config.js */
animation: {
  'fade-in': 'fadeIn 0.5s ease-out',
  'slide-up': 'slideUp 0.3s ease-out',
  'scale-in': 'scaleIn 0.2s ease-out',
}

Framer Motion Examples

Framer Motion 示例

tsx

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
/>

tsx

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.3 }}
/>

Best Practices

最佳实践

Use 200-300ms for micro-interactions, respect prefers-reduced-motion, animate transform/opacity for performance, add easing functions, stagger list items, provide hover/active states.

微交互时长建议设置为200-300ms，尊重prefers-reduced-motion设置，优先对transform/opacity属性做动画以保证性能，添加缓动函数，为列表项设置 stagger 动画，提供悬停/激活状态反馈。