纯HTML+CSS动画需用@keyframes和animation属性实现，内联样式不推荐因复用性差、易冲突且简写会重置子属性；应拆解声明各动画子属性，命名规范，确保元素有宽高，优先使用transform和opacity以保障性能。
纯 HTML + CSS 能做动画，但必须用 @keyframes 和 animation 属性驱动，不能靠 HTML 标签本身——HTML 只负责结构，动效全由 CSS 控制。
为什么直接写 style="animation: ..." 不推荐
内联样式写动画虽然能跑，但无法复用、不好调试、JS 控制时容易冲突。更关键的是：简写 animation 会重置所有子属性（比如你之前设过 animation-iteration-count: infinite，再用 animation: slideIn 1s 就会被悄悄覆盖成 1）。
- 初学建议拆开写：
animation-name、animation-duration、animation-timing-function、animation-fill-mode单独声明 - 命名
@keyframes时别用数字开头或空格，比如@keyframes 1slide或@keyframes slide in都会失效 - 动画没触发？先检查元素是否有宽高——对
height: auto或空div做height动画，浏览器直接忽略
transform 和 opacity 是安全区，其他属性慎用
只有部分 CSS 属性支持硬件加速和流畅插值。transform（含 translate、rotate、scale）和 opacity 是唯二真正“稳”的；top、left、width、background-color 等会触发重排或重绘，尤其在低端设备上掉帧明显。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 想让元素左右移动？用
transform: translateX(100px)，别用left: 100px - 想旋转猫耳朵？加
transform-origin: bottom center锁定旋转轴，否则会漂移 - 颜色渐变可用，但注意：不是所有颜色值都支持插值（比如
hsl(0, 100%, 50%) → hsl(360, 100%, 50%)是平滑的，但red → #ff0可能跳变）
悬停动画只动一次？八成是 animation-fill-mode 没设对
写 .cat:hover { animation: blink 0.3s; }，鼠标划过多次，眼睛只眨一次——因为默认动画播完就回退到初始态，且不会重复触发已结束的实例。
立即学习“前端免费学习笔记（深入）”；
- 要每次悬停都重播：用
animation: blink 0.3s both（both=forwards+backwards） - 要悬停后保持末帧（比如闭眼状态）：加
animation-fill-mode: forwards - 父容器已有动画？子元素 hover 动画可能被层叠覆盖，试试加
!important或提高选择器权重（如.cat .eye:hover）
Safari 上动画闪烁或不动？优先查这三项
Safari 对合成层和动画属性更敏感，常见失效点集中在渲染管线配置上。
- 加
will-change: transform或transform: translateZ(0)强制提升为合成层（但别滥用，会增加内存压力） - 旋转类动画记得设
transform-origin，Safari 对默认原点更严格 - 用
border-radius: 50% 50% 40% 40% / 60% 60% 30% 30%这种百分比写法，避免像素值缩放失真——Safari 对固定 px 的border-radius渲染容错更低
