mojs.html动画不执行的主因是未调用.play()或目标元素无效；属性须用映射格式如x: {0: 100}；仅支持x/y/scale/rotate/opacity等特定属性；交互应于事件中新建实例；注意ios will-change冲突及overflow裁剪问题。
直接用 mojs.Html 就能给任意 HTML 元素加动画，不需要写 CSS 动画或操作 DOM 样式，关键在「属性映射写法」和「播放时机控制」——写错一个花括号或漏掉 .play()，动画就完全不触发。
为什么 mojs.Html 动画不执行？常见卡点
这不是代码没加载，而是声明后没主动播放，或者目标元素不存在：
-
el必须是有效的 CSS 选择器（如'#btn'或'.item'），不能传 DOM 节点对象；若元素尚未渲染进页面，new mojs.Html({ el: '#xxx' })会静默失败 - 所有动画属性必须写成「起止映射」形式：
x: {0: 100}表示从 0px 移动到 100px；写成x: 100或x: [0, 100]都无效 - 必须显式调用
.play()，它不会自动播放；也不支持autoPlay: true这类配置 - 若使用模块化引入（
import mojs from '@mojs/core'），确保构建工具没把mojs摇掉——它不是纯 ESM 库，需确认打包后mojs.Html存在
mojs.Html 支持哪些属性？别乱猜
它只代理部分 CSS 属性，且有固定命名规则，比如没有 transform，但有 x/y/scale/rotate/opacity 等。这些属性最终转为内联 transform 和 opacity，不触发布局重排：
-
x、y：单位是 px，值为数字或映射（如{0: 200}） -
scale：支持单值缩放（{1: 1.5}）或二维（{x: {1: 1.2}, y: {1: 0.8}}） -
rotate：单位是 deg，支持负值（{0: -45}） -
backgroundColor、color：仅支持十六进制、rgb()、hsl() 字符串，不支持命名色（如'red'） -
delay、duration、easing、repeat、isYoyo是通用配置项，不是动画属性
怎么让动画响应点击或滚动？别用 onStart
onStart 只在动画开始时触发一次，不适合绑定交互。正确做法是把 mojs.Html 实例化逻辑放进事件回调里，并复用或销毁实例避免内存泄漏：
const btn = document.querySelector('.trigger-btn');
btn.addEventListener('click', () => {
// 每次点击新建实例（适合一次性动效，如点击反馈）
new mojs.Html({
el: '.target',
scale: {1: 1.2},
duration: 300,
easing: 'cubic.out'
}).play();
// 或复用已有实例（适合开关类动效）
// anim.replay() 会重置并重新播放
});
注意：不要在滚动监听里高频新建 mojs.Html 实例，它内部有 requestAnimationFrame 调度，但频繁创建仍会累积开销。滚动场景建议用 mojs.Timeline + scrollTrigger 插件配合，原生 mojs.Html 不含滚动感知能力。
移动端适配和性能要注意什么？
mojs.Html 默认用 transform 和 opacity，所以硬件加速天然开启，但仍有两个隐藏坑：
- iOS Safari 下，若目标元素设置了
will-change: transform，可能与 mojs 内部的 transform 更新冲突，导致跳帧；建议移除该 CSS 声明 - 动画中修改
width/height会强制触发 layout，严重掉帧；要用scale替代尺寸变化 -
duration小于 16ms（即高于 60fps）无意义，mojs本身不保证 sub-frame 精度，设duration: 100和50在实际表现上几乎没区别
最常被忽略的是「父容器 overflow 隐藏」——如果动画元素在 overflow: hidden 的容器里移动，超出部分会被裁剪，但 mojs.Html 不会自动调整 clip-path 或 z-index，得自己加 CSS 修复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
