css keyframes animation of opacity on img not working

Question

I am trying to animate a simple image's opacity but I can't seem to get it working.

Relevant code: 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;
  }
}

the image itself:

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

I literally have no clue, I have used animations over and over again in my project, but can't seem to figure out what is wrong.

To see it live in action: Check out the project here look for the red footprints on the floor

Thanks!

This one seems to have a working loop: https://stackoverflow.com/questions/23985018/simple-css-animation-loop-fading-in-out-loading-text — imvain2, Dec 16 '20 at 17:43

Aib Syed · Accepted Answer · 2020-12-17T06:42:41.047

For some reason, after removing !important specification from the CSS it seems to work.

EDIT: I looked into it, looks like !important is ignored in keyframe declarations. More info in docs.

NOTE: I did include additional vendor prefixes for older browsers.

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

weird, I would swear I didn't use "!important" at first and it didn't work either, but works like a charm now, thanks! — Mats Raemen, Dec 16 '20 at 20:21

css keyframes animation of opacity on img not working

1 Answers1