解决css使用@keyframes/animation属性失效的问题

钱端工程师2024-05-14 17:22

导致该属性失效的原因可能有很多种，这里记录我遇到的一种：

因为在使用@keyframes时用了 !important 导致属性失效，如：

以下代码阴影不生效：

javascript 复制代码

@keyframes goshadow {
    0% {
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12) !important;
    }

    50% {
      box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.12) !important;
    }

    100% {
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12) !important;
    }
  }
.shawCard {
   animation: goshadow 2s infinite !important;
}

以下代码阴影生效：

javascript 复制代码

@keyframes goshadow {
    0% {
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    }

    50% {
      box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.12);
    }

    100% {
      box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
    }
  }
.shawCard {
   animation: goshadow 2s infinite;
}

在 CSS 动画中，!important 关键字在 @keyframes 规则内部通常是不起作用的，因为关键帧规则本身具有更高的优先级，它们直接定义了在动画过程中的样式变化。此外，在动画的简写属性 animation 中使用 !important 也是不标准的，并且通常不会按预期工作，