Winkle with Height

Question

我知道我无法在last_id := (select id from test order by id desc); for rec in select * from test order by id loop if rec.id = last_id then ... 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;
  }
}

Answer 1

没错，你不能再为不存在的东西制作动画了。所以你必须用另一种方法来隐藏这个元素，比如高度或不透明度，看看这个例子看看差异：

Winkle with Height

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

＆＃13;

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

＆＃13;

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

＆＃13;

Winkle with Opacity

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

不，不是。

不可动画的属性不是动画时段。

display: none和display: block之间没有状态（因为在height: 0和height: 500px之间），因此您无法在它们之间制作动画。

Answer 3

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

height: 0px -> height: 100px;

在这种情况下，考虑到步数和时间，浏览器可以计算两个值之间的转换。它归结为数学。

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

display: none -> display: block;

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

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

3 个答案:

Winkle with Height

Winkle with Opacity