用纯css延迟css位置变化

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属性来完成:

这是一个演示

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

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

注意(来自上面的演示):

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

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