Agent Skills
› nexu-io/motion-anything
nexu-io/motion-anything
GitHub提供声明式入场动画效果,通过xyz属性组合淡入、移动、缩放和旋转,无需编写关键帧。支持无障碍偏好设置,适用于前端UI动效开发。
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.
提供声明式入场动画效果,通过xyz属性组合淡入、移动、缩放和旋转,无需编写关键帧。支持无障碍偏好设置,适用于前端UI动效开发。
需要添加元素入场动画
使用AnimXYZ库进行CSS动画声明
npx skills add nexu-io/motion-anything --skill xyz-fade-big -g -y
提供基于AnimXYZ的声明式CSS动画技能,通过xyz属性实现淡入下移效果,无需编写关键帧,支持组合移动、缩放和旋转,并尊重用户减少动态偏好设置。
需要为元素添加淡入下移入场动画
使用AnimXYZ库进行声明式UI动效开发
npx skills add nexu-io/motion-anything --skill xyz-fade-down -g -y
AnimXYZ的Fade Left声明式入场动画技能,通过xyz属性组合淡入移动缩放旋转,无需编写关键帧,支持无障碍偏好设置。
需要添加元素淡入左侧动画效果
使用AnimXYZ库进行声明式CSS动画配置
npx skills add nexu-io/motion-anything --skill xyz-fade-left -g -y
提供基于AnimXYZ的声明式淡入右移动画技能,通过xyz属性组合渐变、位移等效果,无需编写关键帧,支持无障碍偏好设置。
需要为元素添加淡入右移动画
使用AnimXYZ库进行CSS动画开发
npx skills add nexu-io/motion-anything --skill xyz-fade-right -g -y
提供基于AnimXYZ的声明式CSS动画技能,通过xyz属性组合淡入、位移、缩放和旋转效果,无需编写关键帧,支持无障碍偏好设置。
需要为元素添加入场动画
使用声明式方式配置CSS过渡效果
npx skills add nexu-io/motion-anything --skill xyz-fade-small -g -y
提供基于AnimXYZ的声明式淡入上移动画技能,通过属性配置组合位移、缩放和旋转效果,无需编写关键帧,支持无障碍偏好设置。
需要为元素添加淡入上移动画
使用AnimXYZ库实现CSS动画
npx skills add nexu-io/motion-anything --skill xyz-fade-up -g -y
提供AnimXYZ声明式入场动画配置,通过xyz属性组合淡入、位移等效果,无需编写关键帧。支持无障碍模式,适用于前端UI动效实现。
需要为元素添加左侧翻转入场动画
使用AnimXYZ库实现声明式CSS动画
npx skills add nexu-io/motion-anything --skill xyz-flip-left -g -y
提供基于AnimXYZ的声明式翻转入场动画技能,支持混合淡入、移动等效果,无需编写关键帧。
需要添加元素入场动画
使用AnimXYZ库实现UI动效
npx skills add nexu-io/motion-anything --skill xyz-flip-up -g -y
基于AnimXYZ的声明式CSS动画技能,通过xyz属性组合淡入、位移、缩放和旋转效果,无需编写关键帧,支持减少运动偏好设置。
需要添加页面元素入场动画
使用AnimXYZ库实现组合动效
npx skills add nexu-io/motion-anything --skill xyz-rise-big -g -y
提供基于AnimXYZ的声明式旋转入场动画技能,支持组合淡入、移动、缩放和旋转效果,无需编写关键帧,尊重用户减少运动偏好。
需要为元素添加旋转入场动画
使用AnimXYZ实现组合动画效果
npx skills add nexu-io/motion-anything --skill xyz-rotate -g -y
提供底部弹窗微交互组件,用于移动端UI反馈。支持无障碍偏好及GPU优化性能,适用于按钮、表单等状态变更控件,遵循运动规范。
实现底部弹出层效果
添加移动端微交互动画
npx skills add nexu-io/motion-anything --skill bottom-sheet -g -y
提供按钮按下时的弹簧回弹微交互效果,模拟原生触感反馈。适用于改变状态的UI控件,支持减少运动偏好设置,仅使用变换和透明度以确保GPU性能安全。
需要为按钮或表单控件添加点击触觉反馈时
实现符合无障碍标准的移动端微交互组件时
npx skills add nexu-io/motion-anything --skill button-press -g -y
提供复选框点击时的弹出及绘制勾选动画效果,适用于App UI微交互。支持减少运动偏好设置,仅使用GPU安全的变换和透明度属性,确保性能与无障碍访问。
需要为复选框添加状态切换动画
实现移动端组件的反馈微交互
npx skills add nexu-io/motion-anything --skill checkbox-pop -g -y
提供符合 Material Design 风格的触摸反馈微交互效果,支持 GPU 加速与无障碍偏好设置,适用于按钮等状态变更控件。
需要添加点击涟漪反馈的 UI 组件开发
实现符合无障碍标准的动效交互
npx skills add nexu-io/motion-anything --skill ripple -g -y
提供底部标签栏的滑动激活指示器微交互,支持无障碍模式。用于按钮、表单等组件的状态反馈,强调性能与克制使用。
需要实现移动端原生感的UI微交互
为TabBar或按钮添加状态切换动画
npx skills add nexu-io/motion-anything --skill tab-bar-slide -g -y
提供移动端UI微交互动效,实现Toast从底部滑入、停留后淡出的效果。支持无障碍设置,仅使用GPU加速属性优化性能,适用于状态变更控件的反馈场景。
需要为按钮或表单控件添加操作反馈动效
实现符合无障碍标准的滑动消失提示组件
npx skills add nexu-io/motion-anything --skill toast-pop -g -y
提供基于Animate.css的CSS关键帧动画'Back In Down',无需JS即可实现元素进入效果。支持无障碍偏好设置,建议克制使用以避免干扰阅读。
需要为页面元素添加CSS入场动画
寻找无JavaScript依赖的纯CSS动画方案
npx skills add nexu-io/motion-anything --skill anim-backindown -g -y
提供Animate.css的Back In Left CSS关键帧动画,无需JS。用于实现元素从左侧进入的入场效果,支持无障碍偏好设置,需遵守许可协议并保持克制使用。
需要CSS入场动画
添加左侧滑入效果
npx skills add nexu-io/motion-anything --skill anim-backinleft -g -y
提供基于Animate.css的Back In Right CSS关键帧动画,无需JS且支持无障碍偏好设置。适用于快速实现元素从右侧进入的视觉效果,需合理使用并保留版权信息。
需要添加CSS入场动画
使用Animate.css动画库
npx skills add nexu-io/motion-anything --skill anim-backinright -g -y
提供Animate.css中的Back In Up CSS关键帧动画,无需JS即可实现元素向上入场效果。支持prefers-reduced-motion无障碍设置,需保留版权声明。
需要添加CSS入场动画
前端页面动效开发
npx skills add nexu-io/motion-anything --skill anim-backinup -g -y
提供Animate.css的Back Out Down CSS关键帧退出动画,无需JS,支持减少运动偏好。通过添加类名快速实现元素下落消失效果,需控制使用频率并保留版权 attribution。
需要CSS退出动画
集成Animate.css动画
npx skills add nexu-io/motion-anything --skill anim-backoutdown -g -y
提供CSS关键帧退出动画,无需JS。通过添加类名应用,支持无障碍设置,建议克制使用以保障可读性。
需要元素向左退出动画
前端UI动效开发
npx skills add nexu-io/motion-anything --skill anim-backoutleft -g -y
提供基于Animate.css的Back Out Right CSS退出动画,无需JS。支持prefers-reduced-motion无障碍设置,需保留版权信息并克制使用。
需要添加CSS元素退出动画
寻找现成的CSS关键帧动画
npx skills add nexu-io/motion-anything --skill anim-backoutright -g -y
提供Back Out Up CSS关键帧退出动画,无需JS。支持减少动态偏好设置,需保持克制使用并标注Animate.css版权。
需要添加CSS元素退出动画
实现无JavaScript的CSS过渡效果
npx skills add nexu-io/motion-anything --skill anim-backoutup -g -y
提供Animate.css的Bounce CSS关键帧动画,无需JS且尊重无障碍设置。适用于快速添加强调效果,建议克制使用以避免干扰主要内容阅读。
需要为元素添加CSS弹跳动画
前端开发中引入非JavaScript动画
npx skills add nexu-io/motion-anything --skill anim-bounce -g -y
提供 Bounce In CSS 关键帧动画,源自 Animate.css。无需 JS,直接添加类名即可实现元素弹入效果。支持 prefers-reduced-motion 无障碍设置,建议克制使用以避免干扰主要内容阅读。
需要为页面元素添加入场动画
寻找纯 CSS 的 bounce 效果
npx skills add nexu-io/motion-anything --skill anim-bouncein -g -y
提供 CSS 弹跳进入动画,无需 JS。支持减少动态偏好设置,需保留版权信息。适用于快速添加入场效果,避免在重要内容或大量使用时滥用。
需要为元素添加 CSS 入场动画
实现无 JavaScript 的视觉动效
npx skills add nexu-io/motion-anything --skill anim-bounceindown -g -y
提供Animate.css中的bounceInLeft CSS关键帧动画,无需JS。指导如何复制CSS并添加类名应用入场动画,强调克制使用以保障可访问性并遵守许可协议。
需要为元素添加左侧弹入的CSS动画效果
寻找现成的、无JavaScript依赖的CSS入场动画方案
npx skills add nexu-io/motion-anything --skill anim-bounceinleft -g -y
提供基于Animate.css的bounceInRight CSS关键帧动画,无需JS且支持无障碍设置。用于为元素添加右侧弹入效果,建议克制使用并保留版权信息。
需要CSS入场动画
前端UI动效实现
npx skills add nexu-io/motion-anything --skill anim-bounceinright -g -y
提供基于Animate.css的bounceInUp CSS关键帧动画,无需JS且支持无障碍偏好设置。用于为元素添加优雅的入场动效,建议克制使用以避免干扰阅读。
需要为UI元素添加CSS入场动画
寻找无JavaScript依赖的CSS动画方案
npx skills add nexu-io/motion-anything --skill anim-bounceinup -g -y
提供Animate.css的Bounce Out CSS退出动画,无需JS。支持prefers-reduced-motion无障碍设置,需遵守许可证并合理使用以避免干扰内容阅读。
需要CSS退出动画
实现非JavaScript交互动画
npx skills add nexu-io/motion-anything --skill anim-bounceout -g -y
提供Animate.css的bounceOutDown CSS关键帧动画,无需JS。用于元素退出时的下落弹跳效果,支持prefers-reduced-motion无障碍适配,需保留版权署名并适度使用。
需要为DOM元素添加CSS退出动画
实现非JavaScript的纯CSS下落弹跳效果
npx skills add nexu-io/motion-anything --skill anim-bounceoutdown -g -y
提供 Bounce Out Left CSS 关键帧退出动画,源自 Animate.css。无需 JS,直接添加类名即可使用。支持 prefers-reduced-motion 无障碍特性,需保留版权引用并克制使用。
需要为元素添加左侧弹跳退出动画
寻找纯 CSS 实现的轻量级页面过渡效果
npx skills add nexu-io/motion-anything --skill anim-bounceoutleft -g -y
提供基于Animate.css的CSS关键帧退出动画(Bounce Out Right),无需JS,支持无障碍设置,用于前端UI交互效果。
需要添加元素退出动画
寻找纯CSS动画方案
npx skills add nexu-io/motion-anything --skill anim-bounceoutright -g -y
提供基于Animate.css的CSS弹出向上动画,无需JS。支持无障碍偏好设置,需保留版权信息并克制使用。
需要添加CSS退出动画
前端页面动效开发
npx skills add nexu-io/motion-anything --skill anim-bounceoutup -g -y
提供基于Animate.css的CSS淡入动画实现,无需JS且支持无障碍设置。适用于快速添加元素入场效果,建议适度使用以避免干扰主要内容阅读。
需要为HTML元素添加CSS淡入动画
前端开发中引入无JavaScript依赖的入场动效
npx skills add nexu-io/motion-anything --skill anim-fadein -g -y
提供基于Animate.css的纯CSS底部左侧淡入动画,无需JS,支持无障碍偏好设置。适用于快速添加元素入场动效,建议克制使用以避免干扰主要内容阅读。
需要为页面元素添加CSS入场动画
实现无JavaScript依赖的视觉过渡效果
npx skills add nexu-io/motion-anything --skill anim-fadeinbottomleft -g -y
提供CSS关键帧动画fadeInBottomRight,无需JS,支持无障碍模式。适用于快速页面元素入场效果,建议克制使用以避免干扰阅读体验。
需要添加CSS入场动画
前端UI动效实现
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中FadeInDownBig动画的CSS实现,支持无障碍设置。适用于快速添加无JS的入场动画,建议适度使用以避免干扰关键内容。
需要CSS入场动画
集成Animate.css
npx skills add nexu-io/motion-anything --skill anim-fadeindownbig -g -y
提供基于Animate.css的Fade In Left CSS关键帧动画,无需JS且支持无障碍设置。用于为元素添加左侧进入效果,建议适度使用以避免干扰重要内容阅读。
需要CSS入场动画
实现无JS的页面元素淡入左移效果
npx skills add nexu-io/motion-anything --skill anim-fadeinleft -g -y
提供基于Animate.css的CSS关键帧动画技能,实现元素从左侧淡入效果。无需JS,支持减少运动偏好设置,适用于前端界面增强,使用时需保持克制并保留版权信息。
需要添加CSS入场动画
前端UI动效开发
npx skills add nexu-io/motion-anything --skill anim-fadeinleftbig -g -y
提供基于Animate.css的Fade In Right CSS关键帧动画,无需JS且支持无障碍设置。适用于快速添加元素入场效果,建议克制使用以避免干扰阅读体验。
需要为HTML元素添加CSS入场动画
寻找无JavaScript依赖的CSS动画方案
npx skills add nexu-io/motion-anything --skill anim-fadeinright -g -y
提供CSS关键帧动画Fade In Right Big,无需JS,支持减少动态偏好设置。用于快速实现元素入场效果,建议适度使用以保障可访问性。
需要纯CSS入场动画
集成Animate.css组件
npx skills add nexu-io/motion-anything --skill anim-fadeinrightbig -g -y
提供基于Animate.css的CSS淡入左上角入场动画,无需JS且支持无障碍设置。用于快速为元素添加视觉动效,建议适度使用以优化用户体验。
需要为UI元素添加CSS入场动画
前端页面需要非JavaScript的视觉过渡效果
npx skills add nexu-io/motion-anything --skill anim-fadeintopleft -g -y
提供Animate.css中Fade In Top Right的CSS关键帧动画实现,无需JS,支持无障碍偏好设置。用于为元素添加从右上角淡入的视觉效果,建议克制使用以避免干扰重要内容阅读。
需要添加CSS入场动画
前端页面动效开发
npx skills add nexu-io/motion-anything --skill anim-fadeintopright -g -y
提供基于Animate.css的Fade In Up CSS关键帧动画,无需JS。支持prefers-reduced-motion无障碍设置,需遵守许可协议并适度使用。
需要CSS入场动画
前端页面添加淡入向上效果
npx skills add nexu-io/motion-anything --skill anim-fadeinup -g -y
提供CSS关键帧动画Fade In Up Big,源自Animate.css。无需JS,支持无障碍模式,适用于快速添加元素入场效果,建议克制使用以避免干扰核心内容阅读。
需要为HTML元素添加无JavaScript的入场动画
前端开发中引入CSS动画效果
npx skills add nexu-io/motion-anything --skill anim-fadeinupbig -g -y
提供Animate.css的fadeOut CSS关键帧动画,无需JS,支持无障碍偏好设置。用于快速实现元素退出时的淡出效果,建议克制使用并保留版权署名。
需要CSS淡出动画
前端添加无JS过渡效果
npx skills add nexu-io/motion-anything --skill anim-fadeout -g -y
提供基于Animate.css的CSS关键帧退出动画,无需JS且支持无障碍设置。适用于快速添加元素淡出效果,建议克制使用以避免干扰阅读。
需要为元素添加CSS退出动画
寻找无JavaScript依赖的CSS动画方案
npx skills add nexu-io/motion-anything --skill anim-fadeoutbottomleft -g -y


