CSS显示属性是否可以使用关键帧设置动画

Question

我知道我不能在display none和block之间转换，但我认为我可以通过这样做来做一些步骤动画：

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

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

但实际上这是行不通的。你能确认这是不可能的吗？还有其他解决方案吗？我想过这个，但也没用。如果你能想出更好的办法，我们将不胜感激。

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;
  }
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Answer 1

没错，你不能为已经不存在的东西设置动画。所以你必须用另一种方法来隐藏这个元素，比如高度或不透明度，看看这个例子，看看区别：

随高度Winkle

此示例使li闪烁，但由于高度变化，列表将移动。

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% {
    height:0;
  }
  1%,
  99% {
    height:20px;
  }
}
@keyframes winkle {
  0%, 100% {
    height:0;
  }
  1%,
  99% {
    height:20px;
  }
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

不透明度Winkle

此示例使li闪烁，但列表保持原始高度。

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% {
    opacity:0;
  }
  1%,
  99% {
    opacity:1;
  }
}
@keyframes winkle {
  0%, 100% {
    opacity:0;
  }
  1%,
  99% {
    opacity:1;
  }
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Answer 2

不，不是。

不可设置动画的特性不可设置时间段的动画。

display: none和display: block之间没有状态（就像height: 0和height: 500px之间一样），因此无法在它们之间设置动画。

Answer 3

CSS动画和转换通过在两个数值之间创建步骤来工作，例如：

height: 0px -> height: 100px;

在这种情况下，给定步数和时间，浏览器可以计算两个值之间的转换。归根结底是数学。

另一方面，非数字CSS属性只有两种可能的状态（开/关），因此不能有任何"中间"步骤：

display: none -> display: block;

所有CSS属性都可以在动画或转换中使用，只需考虑该值是否可以在两个值之间采取渐进步骤。