Почему, когда я перемещаю свой первый div вверх, остальные тоже не перемещаются?

Question

Представьте, что у меня есть 3 div:

<div class="one animated">
    I'm the first div
</div>
<div class="two">
    second div
</div>
<div class="three">
    Last one
</div>

У меня есть код для перемещения первого в начало:

.animated {
    animation: animation 2s;
    animation-fill-mode: forwards;
}

@keyframes animation {
    0%      { top: 0; opacity: 1 }
    100%    { top: -300px; opacity: 0 }
}

Я не понимаю, почему первый div перемещается в сверху, но не остальные. Первый исчезает, поэтому я хочу заменить пустое поле другим моим div ...

Что-то вроде этого:

function test() {
   document.getElementById("sample").classList.add("animated");
}

.one {
  border: 1px solid red;
}

.animated {
    animation: animation 2s;
    animation-fill-mode: forwards;
}

@keyframes animation {
    0%      { top: 0; opacity: 1 }
    100%    { top: -300px; opacity: 0 }
}

<div class="one" id="sample">
    I'm the first div
</div>
<div class="two">
    second div
</div>
<div class="three">
    Last one
</div>

<button onclick="test()">Test</button>

Answer 1

Используйте absolute:position; на Keyframes. Это гарантирует, что как только div будет скрыт, он автоматически переместится наверх.

Также вы можете добавить дополнительные атрибуты keyframes, чтобы сделать их гладкими.

function test() {
  document.getElementById("sample").classList.add("animated");
}

.one {
  border: 1px solid red;
}

.animated {
  animation: animation 2s;
  animation-fill-mode: forwards;
}

@keyframes animation {
  0% {
    top: 0;
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
    position: absolute;
  }
}

<div class="one" id="sample">
  I'm the first div
</div>
<div class="two">
  second div
</div>
<div class="three">
  Last one
</div>

<button onclick="test()">Test</button>

Answer 2

Добавьте position: absolute; к .animated классу в вашем css

function test() {
   document.getElementById("sample").classList.add("animated");
}

.one {
  border: 1px solid red;
}

.animated {
    animation: animation 2s;
    animation-fill-mode: forwards;
    position: absolute; // Adding this will help
    transition: all 2s linear;
}

@keyframes animation {
    0%      { top: 0; opacity: 1; }
    50%     {top: -1; opacity: 0.5;}
    100%    { top: -300px; opacity: 0; }
}

<div class="one" id="sample">
    I'm the first div
</div>
<div class="two">
    second div
</div>
<div class="three">
    Last one
</div>

<button onclick="test()">Test</button>