mcpField
A
animation-micro-interaction-pack

animation-micro-interaction-pack

github.com/patricio0312rev设计与 UI63501 次安装41 周前更新
代码仓库

关于 animation-micro-interaction-pack

面向界面设计与开发的动画和微交互模式集合，提供悬停、进出场、加载及手势反馈示例，并强调动效性能和减少动态效果偏好。

主要功能

  1. 01悬停状态动效
  2. 02元素进场与退场效果
  3. 03加载动画模式
  4. 04点击、拖动与滑动反馈
  5. 05Tailwind 动画配置示例
  6. 06性能与减少动态效果建议

适用场景

  1. 01为按钮添加悬停和按下反馈
  2. 02为列表设计错开进场效果
  3. 03制作骨架屏或进度指示
  4. 04依据减少动态效果偏好调整动画

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/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-300ms，遵循 prefers-reduced-motion 设置，为提升性能而为 transform/opacity 添加动画，使用缓动函数，为列表项添加交错效果，并提供悬停/激活状态。

评论

支持 Markdown