ekaterini9 ekaterini9 - 26 days ago 5
CSS Question

Display None For CSS Animation

I'm trying to make an accessibility friendly website and getting hard time with implementing animation or transition with

display:none
property. I must use the
display:none
in order to it be an accessible, however it doesn't animate with the
display:none
. I remember this worked with keyframes animation, but seems like it doesn't today. Any solution, please?

I MUST USE THE
display:none

Answer

Tried to do it by myself with keyframes, but received an unexpected result. Anyone can tell me why the div appears on the screen even if there's display: none property in the keyframe?

.x {
  height: 100px;
  width: 100px;
  background-color: black;
  animation: cx 3s forwards;
}
@keyframes cx {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    display: none;
  }
}
<div class='x'>

</div>