ekaterini9 ekaterini9 - 1 year ago 66
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 Source

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>