关键帧动画需要设置的css,是否使用关键帧显示CSS属性的动画效果？

我知道我不能displaynone和block之间转换，但我认为我可以做一些跨动画由这样做：是否使用关键帧显示CSS属性的动画效果？

li:nth-child(1) {

-webkit-animation: winkle 1s linear;

animation: winkle 1s linear;

}

li:nth-child(2) {

-webkit-animation: winkle 1s linear 1s;

animation: winkle 1s linear 1s;

}

li:nth-child(3) {

-webkit-animation: winkle 1s linear 2s;

animation: winkle 1s linear 2s;

}

li:nth-child(4) {

-webkit-animation: winkle 1s linear 3s;

animation: winkle 1s linear 3s;

}

li:nth-child(5) {

-webkit-animation: winkle 1s linear 4s;

animation: winkle 1s linear 4s;

}

@-webkit-keyframes winkle {

0%, 100% {

display: none;

}

1%,

99% {

display: block

}

}

@keyframes winkle {

0%, 100% {

display: none;

}

1%,

99% {

display: block

}

}

• Item 1
• Item 2
• Item 3
• Item 4

但实际上这是不工作。你能证实这是不可能的吗？还有其他解决方案吗？我想到了这一点，但它也不起作用。如果你能想出更好的东西，将不胜感激。

li:nth-child(1) {

-webkit-animation: winkle 1s linear;

animation: winkle 1s linear;

}

li:nth-child(2) {

-webkit-animation: winkle 1s linear 1s;

animation: winkle 1s linear 1s;

}

li:nth-child(3) {

-webkit-animation: winkle 1s linear 2s;

animation: winkle 1s linear 2s;

}

li:nth-child(4) {

-webkit-animation: winkle 1s linear 3s;

animation: winkle 1s linear 3s;

}

li:nth-child(5) {

-webkit-animation: winkle 1s linear 4s;

animation: winkle 1s linear 4s;

}

li {

overflow: hidden;

}

@-webkit-keyframes winkle {

0%, 100% {

height: 0;

color: red;

}

1%,

99% {

height: auto;

color: blue;

}

}

@keyframes winkle {

0%, 100% {

height: 0;

color: red;

}

1%,

99% {

height: auto;

color: blue;

}

}

• Item 1
• Item 2
• Item 3
• Item 4