Why is it that only my first div moves to the top when I try to rearrange them, while the others stay in

Question

Why is it that only my first div moves to the top when I try to rearrange them, while the others stay in

Picture this scenario with 3 div elements:

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

There is some code to move only the first div to the top:

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

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

The question arises as to why the first div moves to the top while the others do not. Since the first div disappears, the solution is to replace it with the other two divs...

This can be achieved by doing something like the following:

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>

html css animation

Answer 1

Answer №1

To ensure smooth movement, use absolute:position; with Keyframes. This will automatically shift the div to the top when hidden.

You can also include additional attributes in the keyframes for a seamless effect.

function animate() {
  document.getElementById("element").classList.add("animated");
}

.box-one {
  border: 1px solid red;
}

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

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

<div class="box-one" id="element">
  First box
</div>
<div class="box-two">
  Second box
</div>
<div class="box-three">
  Last box
</div>

<button onclick="animate()">Animate</button>

Answer 2

To ensure smooth movement, use absolute:position; with Keyframes. This will automatically shift the div to the top when hidden.

You can also include additional attributes in the keyframes for a seamless effect.

function animate() {
  document.getElementById("element").classList.add("animated");
}

.box-one {
  border: 1px solid red;
}

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

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

<div class="box-one" id="element">
  First box
</div>
<div class="box-two">
  Second box
</div>
<div class="box-three">
  Last box
</div>

<button onclick="animate()">Animate</button>

Answer 3

Answer №2

To enhance the visual effects, make sure to include position: absolute; in the .animated class within your stylesheet.

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

.one {
  border: 1px solid red;
}

.animated {
    animation: animation 2s;
    animation-fill-mode: forwards;
    position: absolute; // Remember to add this line
    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>

Answer 4

To enhance the visual effects, make sure to include position: absolute; in the .animated class within your stylesheet.

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

.one {
  border: 1px solid red;
}

.animated {
    animation: animation 2s;
    animation-fill-mode: forwards;
    position: absolute; // Remember to add this line
    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>

Why is it that only my first div moves to the top when I try to rearrange them, while the others stay in

Answer №1

Answer №2

Similar questions

Using jquery to hide an input box once a checkbox is marked as checked

Show and hide a div with the click of a button

Why does the "error loading page" message appear on the server when there is a PHP function inside jQuery Mobile?

What is the best way to achieve this Bootstrap design without copying the content?

Enhancing password security with an Ajax form field

jquery select2 not functioning properly following ajax call

Can you tell me why the jquery datepicker control is only loading a portion of the CSS?

Issue with Event.target not functioning properly when clicking outside the div to close it

Updating a script to toggle the visibility of div elements depending on the selected options in a hierarchical drop-down menu

In bootstrap, two overlapping DIVs are displayed below each other in mobile mode

The issue arises when applying Tailwind styling to template variables that have widget attributes in Django

`Weaving mesh into place with three.js`

Is there a way to develop a login form that retrieves information from a Google Sheet database?

Utilizing jQuery to eliminate a script function from an external webpage

Ensuring a top margin is applied to a flexbox item of undetermined height

Use PHP to evaluate code within quotation marks on a PHP file

Converting multi-dimensional array into a structured table format

The child and parent tables share identical borders

Basic Jquery CSS style requests

Adjusting the height of a textarea in React mui to match its parent element height