Animation doesnt work

Can’t figure out why the animation in my HTML file isn’t working (the yellow marked text at the top of the page should blink)
Screenshot of my code:

Here is my code (I think it’s used for formatting the page, so I’m gonna put it in a HTML quote, so remove these again) (Sorry for the mess, the full HTML file is uploaded here: https://www.mediafire.com/file/sd02ljz86255b8n/Signaturen.html/file )

I’m a bit unclear how a property like visibility can be animated, given that it is binary in nature. I did attempt to experiment with it in codepen but haven’t achieved much success. visibility is listed as an animatable property so perhaps it comes down to me using firefox.

For your code the error is in #rect, animation-duration accepts time in units of “s” or “ms” (e.g. animation-duration:3s;)
The infinite value should pair with animation-iteration-count property instead.

Sidenote, you can achieve a sort of “blinking” effect with opacity. example:

@keyframes blinking {
  0% {
    opacity:100%;

  }
  90% {
    opacity:100%;

  }
  100% {
    opacity:0%;
  }
}
1 Like

Thank you! Problem is solved, it works

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.