Question

使用CSS3过渡延迟属性，我可以延迟不透明度，颜色等。

但是我怎样才能延迟使用纯css这样的位置？

.element{
    position: absolute;
    visibility: hidden;
}

// Delay with 1s 

    .demo--active .element{
        position: relative;
        visibility: visible;
        float: left;
        width: 33%;
    }

Answer 1

如果你想在位置值之间实际制作动画，例如：从静态到绝对 - 那么你就可以了！ - 因为position不是可动画的属性。

来自MDN：

动画没有

然而如果您只想延迟值之间的更改 - 可以使用animation-delay和animation-fill-mode属性来完成此操作：

Here's a demo

＆＃13;

.wpr {
  position: relative;
}
.wpr div {
  width: 100px;
  height: 100px;
  background: green;
  margin: 10px;
}
.wpr div:nth-child(3) {
  animation: test 2s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}
@keyframes test {
  from {
    position: static;
    top: auto;
    background: green;
  }
  to {
    position: absolute;
    top: 0;
    background: red;
  }
}

＆＃13;

<div class="wpr">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

＆＃13;

注意（来自上面的演示）：

1）第3个div有3s延迟更改为position:absolute

2）使用animation-fill-mode: forwards;，我们可以确保动画块将保留最后一个关键帧设置的计算值。

用纯css延迟css位置变化

1 个答案:

Here's a demo