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

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" />