高性能动画与微交互包 | Tailwind & Framer Motion 动画库 | 前端开发工具

animation-micro-interaction-pack by patricio0312rev/skills

129 周安装量

20 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/patricio0312rev/skills --skill animation-micro-interaction-pack

前端优化动画用户体验

🇨🇳中文介绍

动画与微交互包

创建精美、高性能的动画和微交互效果。

动画模式

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

Tailwind 动画配置

/* 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 示例

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

最佳实践

微交互时长控制在200-300毫秒，尊重prefers-reduced-motion设置，优先使用transform/opacity属性实现高性能动画，添加缓动函数，列表项错开动画，提供悬停/激活状态反馈。

每周安装量

129

代码仓库

patricio0312rev/skills

GitHub 星标数

首次出现时间

2026年1月24日

安全审计

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

🇺🇸English

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

Tailwind Animations

/* 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

<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.

Weekly Installs

129

Repository

patricio0312rev/skills

GitHub Stars

First Seen

Jan 24, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

opencode115

codex112

gemini-cli110

claude-code108

github-copilot105

cursor104