CSS动画类应该如何遵循BEM命名规范？-css教程-PHP中文网

动画类名必须绑定具体block或element，如card--fade-in；禁止无归属类名、跨块组合、模糊词和具体值命名；css需严格匹配animation/transition声明，多动画用逗号分隔并独立定义。

css动画类应该如何遵循bem命名规范？

写 animate-fade 或 slide-in 这类无归属的类名，等于把动画当全局函数用——它不说明“谁在淡入”“在哪滑入”，JS 添加时容易错挂到父容器或无关节点上，CSS 也难定位作用域。

正确做法是让动画修饰符依附于明确组件：card--fade-in、modal__overlay--visible、button__icon--spin。这些名字自带归属信息，删掉 card 或 modal 就失去意义，不会被误复用。

card--fade-in 表示「卡片块」的入场动效，CSS 中必须定义 .card--fade-in 选择器，且只影响该块
modal__overlay--visible 是元素级修饰符，表示「模态框的遮罩层」可见态，不能写成 overlay--visible（overlay 不是已定义 Block）
禁止跨块组合，如 user-card__avatar--loading-spin 是错的——loading-spin 应属于按钮或操作区域，不是头像自身的状态

很多动画不触发，根本原因不是 JS 没加类，而是 CSS 里漏了关键声明。BEM 类名只是开关，背后得有对应动画逻辑支撑。

比如加了 button--loading，但 CSS 只写了 .button--loading { opacity: 0.6; }，没配 transition 或 animation，那它就只是个静态样式，不是动画。

button--loading 必须显式声明 animation: button-loading-spinner 1s infinite，且 @keyframes button-loading-spinner 名称要完全一致
避免用 transition: all .2s 这种全局规则——它会让 padding、margin 等非视觉属性也过渡，干扰预期行为
简单 hover 缩放用 transition 更轻量；复杂循环（如 loading 转圈）用 animation 更可控，且支持 steps() 等帧控能力

一个元素同时需要骨架屏 + 淡入效果，不能靠 JS 拼接两个类名去“触发不同动画”，而应在单个修饰符里声明多个动画。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

例如 loading--skeleton 的实际效果可能包含占位图渐显和背景闪烁，那就直接在 CSS 中写：

.loading--skeleton {
  animation-name: loading-skeleton, fade-in;
  animation-duration: 1.2s, 0.4s;
}

注意两点：每个 @keyframes 必须单独存在，且名称不能以数字开头（@keyframes 2x-bounce 会解析失败）；多个动画的 timing-function 和 fill-mode 需分别设置，不能共用。

动画名之间用英文逗号分隔，顺序决定层叠优先级（前项在下层）
若某动画需暂停（如加载完成时停掉 spinner），应单独控制其 animation-play-state，而不是删整个类
慎用 animation-fill-mode: forwards —— 它会让动画最后一帧样式固化，可能和后续状态类冲突（如 button--success 的颜色被覆盖）

animate-bounce、zoomIn、btn--width-200px 这类命名，本质是把实现细节暴露给接口，导致维护成本飙升。

“bounce” 是动效手法，不是用户能感知的状态；“200px” 是尺寸值，换设计稿就得新增类；它们都不具备语义稳定性。

用行为+组件组合：✅ notification--slide-up（通知组件的上滑入场），❌ slideUp
用布尔或键值型修饰符：✅ tab--enter-active、form-field--invalid，❌ form-field--red-border
避免数字开头、驼峰、下划线：--v2-fade ❌、buttonLoadingSpin ❌、button_loading-spin ❌，统一用小写字母+双连字符