WebStorm 本身不提供可视化拖拽制作 CSS3 动画功能，需手动编写 @keyframes 和 animation 规则；它通过语法高亮、Live Template（如输入 @keyframes 后 Tab 补全为含 0%/100% 的结构）、属性自动提示及实时预览辅助高效编码，但不自动生成动画，也不校验时长是否为 0 或运行时错误，须结合浏览器 DevTools 调试。
WebStorm 本身不提供“制作 CSS3 动画”的可视化拖拽功能，它是个代码编辑器，不是动画生成器。想用 WebStorm 做 CSS3 动画，核心是写对 @keyframes 和 animation 相关规则，并借助它的语法高亮、自动补全和实时预览能力提速——而不是靠它“自动生成”动画。
怎么在 WebStorm 里高效写 @keyframes 规则
WebStorm 对 @keyframes 有原生支持，但默认不会自动展开完整结构。你需要手动输入或利用 Live Template：
- 输入
@keyframes后按Tab，会自动补全为@keyframes name { 0% { } 100% { } }（前提是启用了 CSS Live Templates） - 如果没反应，进
Settings > Editor > Live Templates > CSS，确认keyframes模板已启用 -
0%和100%必须显式写出，否则部分旧版 Safari 或 IE 兼容性会出问题；from/to可读性好，但只等价于0%/100%，不能混用其他百分比 - 别在
@keyframes里写伪类（如&:hover）或嵌套选择器——它只接受纯样式声明
绑定动画时 animation 属性漏写哪个就失效
常见错误是只写了 animation-name，却忘了 animation-duration。浏览器看到 animation: myAnim; 会直接忽略，因为默认时长是 0s：
- 最简有效写法：
animation: myAnim 2s;（名称 + 时长，其他用默认值） - 推荐显式写全关键项：
animation: myAnim 2s ease-in-out 0s 1 forwards;，避免依赖默认行为引发意外 -
animation-fill-mode: forwards很容易被忽略——不加的话，动画播完立刻回退到初始状态，视觉上像“闪一下就没了” - WebStorm 会在你输入
animation:后弹出属性建议，但不会校验时长是否为 0；得自己盯住2s这类值
调试动画卡顿或不触发的三个检查点
在 WebStorm 里写完，浏览器里不动？别急着重写，先查这三处：
立即学习“前端免费学习笔记（深入）”；
- 元素是否设置了
position（如relative或absolute）？transform类动画（平移/旋转/缩放）在无定位元素上可能表现异常 - 检查控制台有没有
Invalid property name或Unknown animation name错误——WebStorm 不报这类运行时错误，得切到浏览器 DevTools 的 Console 看 - 动画用了
height/width或margin等触发布局计算的属性？它们比transform和opacity更耗性能，容易卡。WebStorm 不会警告这点，但 Chrome 的 Rendering 面板能标出“Layout Thrashing”
真正难的不是写出来，而是判断该用 transition 还是 animation、什么时候该加 will-change、以及如何让动画在低配手机上不掉帧——这些 WebStorm 不提示，得靠你手动测、手动调。
