display prop doesnt work in animation it seems

This commit is contained in:
Cloudburst 2022-10-03 10:42:02 +02:00 committed by GitHub
parent a4acf33ffd
commit f3fdeb3543
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 22 additions and 9 deletions

View File

@ -1,19 +1,32 @@
@keyframes five-s-hide { @keyframes five-s-hide {
0% { display: block; } 0% { }
80% { display: block; } 80% { }
100% { display: none; } 100% {
height: 0;
padding: 0;
margin: 0;
}
} }
@keyframes five-s-show { @keyframes five-s-show {
0% { display: none; } 0% {
80% { display: none; } height: 0;
100% { display: block; } padding: 0;
margin: 0;
}
80% {
height: 0;
padding: 0;
margin: 0;
}
100% { }
} }
.swap-child *:nth-child(1) { .swap-child > *:nth-child(1) {
animation: five-s-hide 5s linear 0s 1 normal forwards; animation: five-s-hide 5s linear 0s 1 normal forwards;
overflow: hidden;
} }
.swap-child *:nth-child(2) { .swap-child > *:nth-child(2) {
display: none;
animation: five-s-show 5s linear 0s 1 normal forwards; animation: five-s-show 5s linear 0s 1 normal forwards;
overflow: hidden;
} }