Agent Skills
› nexu-io/motion-anything
nexu-io/motion-anything
GitHub提供声明式入场动画效果,通过属性组合淡入、位移、缩放和旋转,无需编写关键帧,支持无障碍偏好设置。
Install All Skills
npx skills add nexu-io/motion-anything --all -g -y
Skills in Collection (230)
Showing top 50 of 230 by quality score. Use the install list command or open individual skills for the rest.
提供声明式入场动画效果,通过属性组合淡入、位移、缩放和旋转,无需编写关键帧,支持无障碍偏好设置。
需要添加元素入场动画
希望使用声明式CSS实现复合动画效果
npx skills add nexu-io/motion-anything --skill xyz-fade-big -g -y
提供基于AnimXYZ的声明式淡入下滑动画技能,通过xyz属性组合效果,无需编写关键帧,支持无障碍访问。
需要添加元素进入动画
使用AnimXYZ库实现声明式动效
npx skills add nexu-io/motion-anything --skill xyz-fade-down -g -y
提供基于AnimXYZ的声明式CSS动画技能,通过xyz属性实现淡入左移等组合入场效果,无需编写关键帧,支持无障碍模式。
需要为前端元素添加声明式入场动画
使用AnimXYZ库实现淡入或位移效果
npx skills add nexu-io/motion-anything --skill xyz-fade-left -g -y
提供声明式入场动画能力,通过属性组合淡入、移动等效果,无需编写关键帧,支持无障碍偏好设置。
需要为元素添加声明式入场动画
使用 xyz 属性配置淡入右移效果
npx skills add nexu-io/motion-anything --skill xyz-fade-right -g -y
提供基于AnimXYZ的声明式淡入动画组件,支持混合移动、缩放和旋转效果,无需编写关键帧,尊重用户减少动态偏好设置。
需要添加元素进入动画
前端UI动效开发
npx skills add nexu-io/motion-anything --skill xyz-fade-small -g -y
提供基于AnimXYZ的声明式淡入上移动画效果,通过属性配置实现组合动效,无需编写关键帧。支持无障碍偏好设置,适用于前端页面元素入场动画场景。
需要为HTML元素添加淡入上移动画效果
使用AnimXYZ库进行声明式CSS动画配置
npx skills add nexu-io/motion-anything --skill xyz-fade-up -g -y
AnimXYZ的Flip Left声明式入场动画技能,通过xyz属性组合淡入、移动等效果,无需编写关键帧,支持无障碍偏好。
需要添加声明式CSS动画效果
前端页面元素入场动画需求
npx skills add nexu-io/motion-anything --skill xyz-flip-left -g -y
提供声明式动画效果,通过xyz属性组合淡入、移动、缩放和旋转,无需编写关键帧。支持无障碍偏好,适用于前端页面元素入场动画。
需要为元素添加入场动画
使用AnimXYZ库进行声明式动画配置
npx skills add nexu-io/motion-anything --skill xyz-flip-up -g -y
提供基于AnimXYZ的声明式入场动画技能,通过xyz属性组合淡入、移动、缩放和旋转效果,无需编写关键帧。支持无障碍模式,适用于前端UI动效开发。
需要为元素添加入场动画
使用AnimXYZ库进行CSS动画配置
npx skills add nexu-io/motion-anything --skill xyz-rise-big -g -y
提供AnimXYZ声明式旋转入场动画技能,通过xyz属性组合淡入移动缩放旋转,无需编写关键帧,支持无障碍偏好并尊重减少运动设置。
需要为元素添加声明式旋转入场动画
使用AnimXYZ库实现CSS动画效果
npx skills add nexu-io/motion-anything --skill xyz-rotate -g -y
底部抽屉微交互组件,提供原生反馈。适用于按钮、表单等状态改变控件,遵循无障碍规范,支持减少动画模式,确保高性能渲染。
需要实现移动端或App风格的底部弹出层交互
为UI控件添加滑出式状态反馈
npx skills add nexu-io/motion-anything --skill bottom-sheet -g -y
提供按钮按压的微交互反馈,模拟原生触感。适用于改变状态的UI控件,支持减少动态偏好设置,确保GPU安全的性能优化。
需要添加按钮或表单控件的点击/按压微交互
实现移动端App风格的触觉反馈效果
npx skills add nexu-io/motion-anything --skill button-press -g -y
提供带有弹出及绘制勾选动画的复选框微交互组件,适用于移动端控件反馈。遵循无障碍规范并优化性能,仅用于状态变更的控制元素。
需要实现复选框点击反馈动画
前端UI组件开发中的微交互需求
npx skills add nexu-io/motion-anything --skill checkbox-pop -g -y
实现符合 Material Design 风格的点击涟漪动画微交互,提供原生触感反馈。支持 prefers-reduced-motion 无障碍设置,仅使用 GPU 安全的变换属性以优化性能,适用于按钮等状态变更控件。
需要为 UI 组件添加点击视觉反馈
实现 Material Design 风格的动效
npx skills add nexu-io/motion-anything --skill ripple -g -y
实现底部标签栏激活指示器滑动效果,提供原生般微交互反馈。支持减少动态偏好设置,仅使用变换和透明度以保证性能,适用于按钮、表单等状态变化控件。
需要实现移动端底部导航栏切换动画
为UI控件添加平滑的状态反馈动效
npx skills add nexu-io/motion-anything --skill tab-bar-slide -g -y
定义底部滑入后消失的Toast微交互,适用于按钮等状态变更控件。遵循无障碍规范,支持减少动画偏好,仅使用GPU安全的变换和透明度属性以保障性能。
需要为UI控件添加操作反馈时
实现符合无障碍标准的微交互动画时
npx skills add nexu-io/motion-anything --skill toast-pop -g -y
提供 Back In Down CSS 关键帧动画,源自 Animate.css。无需 JS,支持 prefers-reduced-motion,适用于快速入口动画,需克制使用并保留版权信息。
需要添加 CSS 入场动画
前端 UI 动效实现
npx skills add nexu-io/motion-anything --skill anim-backindown -g -y
提供基于Animate.css的Back In Left CSS关键帧动画,无需JS,支持无障碍偏好设置。适用于快速添加元素入场效果,需控制使用频率并保留版权信息。
需要为DOM元素添加CSS入场动画
实现无JavaScript的视觉动效
npx skills add nexu-io/motion-anything --skill anim-backinleft -g -y
提供Animate.css的Back In Right CSS关键帧动画,无需JS,支持无障碍偏好设置。适用于快速添加元素进入效果,需保持克制使用。
需要CSS入场动画
前端UI动效开发
npx skills add nexu-io/motion-anything --skill anim-backinright -g -y
提供基于Animate.css的CSS关键帧入场动画'Back In Up',无需JS,支持减少运动偏好设置。用于快速为元素添加优雅的进入效果,需保持克制使用并保留版权署名。
需要为页面元素添加CSS入场动画
前端开发中引入非JavaScript动画效果
npx skills add nexu-io/motion-anything --skill anim-backinup -g -y
提供Animate.css的Back Out Down CSS关键帧退出动画,无需JS,支持无障碍偏好设置。用于快速添加元素退出效果,需克制使用并保留版权标注。
需要CSS退出动画
集成Animate.css动画
npx skills add nexu-io/motion-anything --skill anim-backoutdown -g -y
提供Animate.css的backOutLeft CSS退出动画,无需JS,支持无障碍偏好设置。适用于快速添加元素离开效果,需克制使用并保留版权信息。
需要为元素添加CSS退出动画
查找现成的CSS关键帧动画代码
npx skills add nexu-io/motion-anything --skill anim-backoutleft -g -y
提供Animate.css的Back Out Right CSS关键帧退出动画,无需JS且尊重减少运动偏好。适用于快速添加元素退出效果,需克制使用并保留版权信息。
需要为HTML元素添加CSS退出动画
实现无JavaScript的纯CSS页面过渡效果
npx skills add nexu-io/motion-anything --skill anim-backoutright -g -y
提供Animate.css的Back Out Up CSS关键帧退出动画,无需JS,支持prefers-reduced-motion无障碍设置。
需要添加CSS退出动画
实现无JS的页面元素消失效果
npx skills add nexu-io/motion-anything --skill anim-backoutup -g -y
提供基于 Animate.css 的 Bounce CSS 关键帧动画,无需 JS。支持 prefers-reduced-motion,需克制使用并保留版权 attribution。
需要添加元素强调动画
前端 UI 动效开发
npx skills add nexu-io/motion-anything --skill anim-bounce -g -y
提供 Bounce In CSS 关键帧动画,源自 Animate.css。无需 JS,支持 prefers-reduced-motion 无障碍适配。用于快速为元素添加入场动画效果,需合理使用并保留版权属性。
需要添加 CSS 入场动画
实现无 JavaScript 的视觉动效
npx skills add nexu-io/motion-anything --skill anim-bouncein -g -y
提供 Animate.css 的 bounceInDown CSS 关键帧动画,无需 JS,支持 prefers-reduced-motion。适用于快速添加入场动画,需克制使用并保留版权信息。
需要为元素添加 CSS 入场动画
询问如何使用 bounceInDown 动画
npx skills add nexu-io/motion-anything --skill anim-bounceindown -g -y
提供 CSS 关键帧动画 Bounce In Left,无需 JS。支持无障碍偏好设置,需遵守许可并适度使用。
需要添加 CSS 入场动画
实现 bounceInLeft 效果
npx skills add nexu-io/motion-anything --skill anim-bounceinleft -g -y
提供Animate.css的Bounce In Right CSS关键帧动画,无需JS,支持prefers-reduced-motion。用于快速添加入场动画效果。
需要CSS入场动画
前端UI动效实现
npx skills add nexu-io/motion-anything --skill anim-bounceinright -g -y
提供基于Animate.css的bounceInUp CSS关键帧动画,无需JS,支持无障碍偏好设置。用于快速添加元素入场动画,建议克制使用以保障可访问性。
需要为HTML元素添加CSS入场动画
寻找无JavaScript依赖的CSS动画方案
npx skills add nexu-io/motion-anything --skill anim-bounceinup -g -y
提供 Bounce Out CSS 退出动画,源自 Animate.css。无需 JS,支持 prefers-reduced-motion 无障碍设置,需限制使用频率并保留版权属性。
需要为元素添加 CSS 退出动画
实现非 JavaScript 的页面过渡效果
npx skills add nexu-io/motion-anything --skill anim-bounceout -g -y
提供 Animate.css 的 Bounce Out Down CSS 退出动画,无需 JS。支持 prefers-reduced-motion 无障碍设置,需遵守 Hippocratic License 2.1 并保留版权信息。建议克制使用,避免影响重要内容阅读。
需要添加 CSS 元素退出动画
寻找现成的关键帧动画代码
npx skills add nexu-io/motion-anything --skill anim-bounceoutdown -g -y
提供 Animate.css 的 Bounce Out Left CSS 关键帧动画,无需 JS。适用于元素退出场景,需克制使用并尊重无障碍偏好。
需要添加 CSS 退出动画
实现 bounceOutLeft 效果
npx skills add nexu-io/motion-anything --skill anim-bounceoutleft -g -y
提供基于 Animate.css 的 bounceOutRight CSS 退出动画,无需 JS,支持无障碍偏好设置。
需要添加元素退出动画
寻找轻量级 CSS 动效
npx skills add nexu-io/motion-anything --skill anim-bounceoutright -g -y
提供 bounceOutUp CSS 关键帧退出动画,无需 JS。适用于快速添加元素消失效果,支持 prefers-reduced-motion 无障碍选项,需克制使用并保留版权标注。
需要为 DOM 元素添加 CSS 退出动画
实现非 JavaScript 的页面过渡效果
npx skills add nexu-io/motion-anything --skill anim-bounceoutup -g -y
提供基于Animate.css的CSS淡入动画实现,无需JS。支持无障碍偏好设置,适用于快速添加元素入场效果,建议克制使用以避免干扰重要内容。
需要为HTML元素添加CSS淡入动画
寻找无JavaScript依赖的CSS关键帧动画
npx skills add nexu-io/motion-anything --skill anim-fadein -g -y
提供来自 Animate.css 的 CSS 关键帧动画 fadeInBottomLeft,无需 JS,支持无障碍偏好设置。适用于快速添加元素入场效果,建议克制使用并保留版权属性。
需要添加 CSS 入场动画
实现底部左侧渐显效果
npx skills add nexu-io/motion-anything --skill anim-fadeinbottomleft -g -y
提供基于 Animate.css 的 CSS 关键帧动画 Fade In Bottom Right,无需 JS。支持无障碍偏好设置,需遵守许可并限制使用场景。
需要为元素添加底部右侧进入的 CSS 动画效果
询问如何集成或应用 Animate.css 中的特定入场动画
npx skills add nexu-io/motion-anything --skill anim-fadeinbottomright -g -y
提供Animate.css的Fade In Down CSS关键帧动画,无需JS,支持无障碍设置。用于快速添加元素入场效果,建议克制使用以保障体验。
需要为页面元素添加淡入下落动画
询问CSS入场动画实现方案
npx skills add nexu-io/motion-anything --skill anim-fadeindown -g -y
提供Animate.css的Fade In Down Big CSS关键帧动画,无需JS且尊重无障碍设置。适用于快速添加元素入场动画,建议克制使用以避免干扰重要内容。
需要添加CSS入场动画
寻找无JavaScript的CSS动画方案
npx skills add nexu-io/motion-anything --skill anim-fadeindownbig -g -y
提供基于Animate.css的Fade In Left CSS关键帧动画,无需JS且支持无障碍偏好。用于为元素添加简洁的入场效果,建议克制使用并保留版权标注。
需要添加CSS入场动画
实现无JavaScript的视觉动效
npx skills add nexu-io/motion-anything --skill anim-fadeinleft -g -y
提供 Fade In Left Big CSS 关键帧动画,源自 Animate.css。无需 JS,直接添加类名即可使用。支持 prefers-reduced-motion 无障碍设置,需遵守许可并适度使用。
需要为元素添加入场动画
寻找纯 CSS 的淡入左移效果
npx skills add nexu-io/motion-anything --skill anim-fadeinleftbig -g -y
提供基于Animate.css的Fade In Right CSS关键帧动画,无需JS,支持无障碍偏好设置。用于为元素添加快速入场动画效果,建议克制使用。
需要添加CSS入场动画
询问Animate.css用法
npx skills add nexu-io/motion-anything --skill anim-fadeinright -g -y
提供基于Animate.css的Fade In Right Big CSS关键帧动画,无需JS且尊重无障碍设置。用于快速实现元素入场效果,建议克制使用并保留版权信息。
需要添加CSS入场动画
前端页面动态效果开发
npx skills add nexu-io/motion-anything --skill anim-fadeinrightbig -g -y
提供从 Animate.css 引入的左上角淡入 CSS 关键帧动画,无需 JS。适用于快速页面元素入场效果,建议克制使用以保障可读性,并尊重用户减少动态效果的偏好设置。
需要为页面元素添加淡入动画
实现无 JavaScript 的 CSS 入场特效
npx skills add nexu-io/motion-anything --skill anim-fadeintopleft -g -y
提供基于 Animate.css 的 CSS 关键帧动画 fadeInTopRight,无需 JS,支持无障碍偏好设置。用于快速实现元素从右上角淡入效果,需保持克制使用并保留版权信息。
需要添加 CSS 入场动画
寻找现成的前端动效组件
npx skills add nexu-io/motion-anything --skill anim-fadeintopright -g -y
提供基于Animate.css的Fade In Up CSS关键帧动画,无需JS且尊重无障碍设置。用于为元素添加简洁的入场动画效果,需保持克制使用并保留版权信息。
需要为网页元素添加CSS入场动画
实现不依赖JavaScript的视觉过渡效果
npx skills add nexu-io/motion-anything --skill anim-fadeinup -g -y
提供Animate.css中Fade In Up Big动画的CSS实现,无需JS,支持无障碍偏好设置。适用于快速添加元素入场动画,建议克制使用并保留版权信息。
需要为元素添加入场动画效果
前端开发中引入CSS动画
npx skills add nexu-io/motion-anything --skill anim-fadeinupbig -g -y
提供基于Animate.css的CSS淡出动画,无需JS,支持无障碍偏好设置。用于快速为元素添加退出动画,建议克制使用以避免干扰重要内容阅读。
需要添加CSS退出动画
前端页面元素淡出效果
npx skills add nexu-io/motion-anything --skill anim-fadeout -g -y
提供基于 Animate.css 的 CSS 关键帧退出动画,无需 JS。支持 prefers-reduced-motion,适用于快速实现元素从左下角淡出效果,需克制使用并保留版权署名。
需要为 UI 元素添加 CSS 退出动画
前端页面需要非 JavaScript 实现的过渡效果
npx skills add nexu-io/motion-anything --skill anim-fadeoutbottomleft -g -y


