Как я могу отложить изменение положения: абсолютное на относительное, используя CSS? - PullRequest
Новая
       132

Как я могу отложить изменение положения: абсолютное на относительное, используя CSS?

0 голосов
/ 10 июля 2020

Пытаюсь попрактиковаться в работе с переходами. Прямо сейчас я хочу отложить переход от position: absolute к position: relative.

Я пробовал использовать: 

transition: position;
transition-duration: 2s;
transition-delay: 3s;

Но это вообще не сработало.

Затем я начал изучать использование ключевых кадров анимации, и это дало мне желаемый результат. Однако он не работает с Safari. 

.wpr {
  position: relative;
}

.wpr div {
  width: 200px;
  height: 200px;
  background: green;
  margin: 10px;
}

.wpr div:nth-child(3) {
  position: absolute;
  top: 0;
  background-color: red;
  animation: test 2s;
  animation-delay: 3s;
  animation-fill-mode: forwards;
}

@keyframes test {
  0% {
    position: absolute;
    top: 0;
    background: red;
  }
  90% { position: absolute; }
  100% {
    position: relative;
    background: pink;
  }
}
<div class="wpr">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Итак, моя конечная цель - иметь возможность отложить переход от абсолютного к относительному и заставить его работать и в Safari.

Вот мой Codepen

...