CSS中类名与动画名重名是否可行？是否存在冲突风险？

首先明确结论：CSS允许为类选择器和动画设置相同名称，且不会产生功能冲突。

原因很简单：CSS里的类选择器和动画名称属于独立的命名空间。类选择器（比如.wobble）的作用是匹配带有对应class属性的HTML元素，而动画名称（比如@keyframes wobble）是供animation-name属性调用的动画标识，浏览器会根据代码上下文自动区分这两者，不会出现识别错误。

你提供的示例代码完全可以正常运行，当鼠标悬停在带有wobble类的div上时，浏览器会正确找到同名的wobble动画并执行：

<style>
.wobble {
  width: 75px;
  height: 75px;
  background: #777;
}
.wobble:hover {
  animation-name: wobble;
  animation-duration: 0.8s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin: 50% 100%;

  -webkit-animation-name: wobble;
  -webkit-animation-duration: 0.8s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-transform-origin: 50% 100%;
}

@keyframes wobble {
  0% {
    -webkit-transform: none;
    transform: none;
  }
  15% {
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
  }
  30% {
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
  }
  45% {
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
  }
  60% {
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
  }
  75% {
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
  }
  100% {
    -webkit-transform: none;
    transform: none;
  }
}
</style>

<div class="wobble">Wobble</div>

这种命名方式甚至有一定优势——让类名和对应的动画名称保持一致，能提升代码的可读性和关联性，只要你自己能清晰区分两者的作用，就可以放心使用。

内容的提问来源于stack exchange，提问作者Eli O.