Ich versuche eine barrierefreie Website zu erstellen und es wird mir schwer fallen, Animationen oder Transitionen mit display:none zu implementieren. Ich muss das display:none verwenden, um es zugänglich zu machen, jedoch animiert es nicht mit der display:none. Ich erinnere mich, dass dies mit Keyframes-Animationen funktioniert hat, aber heute scheint es nicht so. Irgendeine Lösung, bitte?Anzeige Keine Für CSS-Animation
Ich muss die display:none
es selbst mit Keyframes zu tun versucht verwenden, aber ein unerwartetes Ergebnis erhalten. Jeder kann mir sagen, warum das Div auf dem Bildschirm erscheint, selbst wenn es display: none Eigenschaft im Keyframe gibt?
.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>Ich kann :) Weil Sie es auf die 'Keyframes' setzen. Sie müssen das 'display: none' für die' .x' Klasse sowie – ekaterini9
@ ekaterini9 einstellen. Dann wird die Animation überhaupt nicht funktionieren. –
Genau. Das ist das Problem. Sonst ist es nutzlos ... weil Sie "display: none" nicht auf das Element setzen. Was nutzt das? keiner. – ekaterini9
Es gibt keine Antwort auf meine Frage. Ich muss das 'display: none' verwenden – ekaterini9
Animierte Anzeige keine ist NICHT MÖGLICH Sie müssen Deckkraft oder etwas anderes cit aus dem Duplikat verwenden:" CSS (oder jQuery, für diese Angelegenheit) kann nicht zwischen display: none animieren und anzeigen : Block ;. " – paolobasso
@ Ekaterini9 Sie können nicht. Die Eigenschaft 'display' ist nicht animierbar. – TylerH