0

This might totally be a very stupid question, but I'm self-taught and I have a lot of questions.

I was playing with css animations and I wanted a blinking effect so I wrote: HTML:

<span class="blink">Blink</span>

CSS:

.box{
  height: 500px;
  width: 500px;
  background: red;
  animation: blink 1s linear 0s infinite;

}
@keyframes blink {
  50%{
    display: none;
  }
}

but it wouldn't work, so I tried using opacity: 0; and it worked, I'm just wondering why ? what's the difference ?

Thank you.

Salma EL BARMAKI
  • 127
  • 2
  • 6

1 Answers1

2

Not all CSS properties are animatable, and the ones that are aren't all transitionable. Check out MDN pages for more information about an individual properties animationability https://developer.mozilla.org/en-US/docs/Web/CSS/display

In your case, display would make for a poor blink because it would be removed from layout and cause everything to shift; visibility would be a better option.

Here's a working example:

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
}
@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}
Here is a <span class="blink">blinking</span> text.
Charlie
  • 8,530
  • 2
  • 55
  • 53
  • A nice reference list of animatable properties can be found [here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties). Also, animation spec explicitly says that setting `display` to `none` stops all animations, which might be problematic if it was allowed to animate on. :) – Amadan Apr 20 '21 at 05:32