Дисплей Нет Для анимации CSS

Question

Я пытаюсь сделать сайт, удобный для доступа, и усложнить процесс анимации или перехода с помощью свойства display:none. Я должен использовать display:none, чтобы он был доступным, однако он не анимируется с display:none. Я помню, что это работало с анимацией ключевых кадров, но похоже, что это не сегодня. Любое решение, пожалуйста?

Я ДОЛЖЕН ИСПОЛЬЗОВАТЬ display:none

Answer 1

Пытался сделать это сам с ключевыми кадрами, но получил неожиданный результат. Любой может сказать мне, почему div появляется на экране, даже если в ключевом кадре есть свойство display: none?

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