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 {
0% { display: block; }
80% { display: block; }
100% { display: none; }
0% { }
80% { }
100% {
height: 0;
padding: 0;
margin: 0;
}
}
@keyframes five-s-show {
0% { display: none; }
80% { display: none; }
100% { display: block; }
0% {
height: 0;
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;
overflow: hidden;
}
.swap-child *:nth-child(2) {
display: none;
.swap-child > *:nth-child(2) {
animation: five-s-show 5s linear 0s 1 normal forwards;
overflow: hidden;
}