Delay css position change with pure css

Question

With the CSS3 transition-delay Property I can delay the opacity, color etc.

But how can I delay things like the position with pure css ?

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

// Delay with 1s 

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

Answer 1

If you want to actually animate between the position values eg: from static to absolute- then you can't! - because position is not an animatable property.

From MDN:

Animatable no

However if you just want to delay the change between the values - this can be done with the animation-delay and animation-fill-mode properties:

Here's a demo

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

Notice (from the above demo) that:

1) there's a 3s delay for the 3rd div to change to position:absolute

2) With animation-fill-mode: forwards; we can ensure that the animated block will retain the computed values set by the last keyframe.