css img 上不透明度的关键帧动画不起作用

Question

我正在尝试为简单图像的不透明度设置动画，但我似乎无法让它工作。

相关代码： css

.ggmedia[id^="pijl_"] {
    opacity: 0.66;
    -webkit-animation-name: footsteps;
    animation-name: footsteps;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0.001s;
    animation-delay: 0.001s;
}

@-webkit-keyframes footsteps {
  0% {
      opacity: 0.66 !important;  
  }
  33.3% {
      opacity: 0.66 !important;
  }
  50% {
      opacity: 0.25 !important;
  }
  66.6% {
      opacity: 0.66 !important;
  }
  100% {
    opacity: 0.66 !important;
  }
}
@keyframes footsteps {
  0% {
      opacity: 0.66 !important;  
  }
  33.3% {
      opacity: 0.66 !important;
  }
  50% {
      opacity: 0.25 !important;
  }
  66.6% {
      opacity: 0.66 !important;
  }
  100% {
    opacity: 0.66 !important;
  }
}

图像本身：

<img class="ggmedia pointer" id="pijl_33_to_38" src="images/footsteps.png" width="500" height="500">

我真的不知道，我在我的项目中一遍又一遍地使用动画，但似乎无法弄清楚哪里出了问题。

要查看实际效果：Check out the project here寻找地板上的红色脚印

谢谢！

Answer 1

出于某种原因，从 CSS 中删除 !important 规范后，它似乎起作用了。

编辑：我调查了一下，看起来 !important 在关键帧声明中被忽略了。 更多信息在 docs .

注意：我确实为旧版浏览器添加了额外的供应商前缀。

.ggmedia[id^="pijl_"] {
    opacity: 0.66;
    -webkit-animation-name: footsteps;
    animation-name: footsteps;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-delay: 0.001s;
    animation-delay: 0.001s;
}

@-webkit-keyframes footsteps {
  0% {
    opacity: 0.66;
  }
  33.3% {
    opacity: 0.66;
  }
  50% {
    opacity: 0.25;
  }
  66.6% {
    opacity: 0.66;
  }
  100% {
    opacity: 0.66;
  }
}

@-moz-keyframes footsteps {
  0% {
    opacity: 0.66;
  }
  33.3% {
    opacity: 0.66;
  }
  50% {
    opacity: 0.25;
  }
  66.6% {
    opacity: 0.66;
  }
  100% {
    opacity: 0.66;
  }
}

@keyframes footsteps {
  0% {
    opacity: 0.66;
  }
  33.3% {
    opacity: 0.66;
  }
  50% {
    opacity: 0.25;
  }
  66.6% {
    opacity: 0.66;
  }
  100% {
    opacity: 0.66;
  }
}

@-o-keyframes footsteps {
  0% {
    opacity: 0.66;
  }
  33.3% {
    opacity: 0.66;
  }
  50% {
    opacity: 0.25;
  }
  66.6% {
    opacity: 0.66;
  }
  100% {
    opacity: 0.66;
  }
}

<img class="ggmedia pointer" id="pijl_33_to_38" src="https://cdn.pixabay.com/photo/2019/12/30/20/34/snow-4730553__480.jpg" width="500" height="500" />

css img 上不透明度的关键帧动画不起作用

css keyframes animation of opacity on img not working

html

css

keyframe

css-animations