Анимирующее движение элементов ⇐ Html

[Anonymous]

У меня есть дивизион, который растет в размере на пахни, и у которого есть два элемента, которые могут вписаться только в этот Div, пока он большой. Один из этих элементов скрыт с позицией: абсолютно, когда родительский див не завис. Когда он парирует, появляется вышеупомянутый элемент, но второй элемент мгновенно бросается на сторону Div. Как я могу заставить второй элемент перейти на сторону Div, например, с легкостью? > html: < /p>




< /code>
css: < /p>
@import "tailwindcss";

@theme {
}

@keyframes make-small {
from {
width: 450px;
}

to {
width: 250px;
}
}

@keyframes asd {
from {
position: static;
opacity: 100;
}

to {
position: absolute;
opacity: 0;
}
}

#main {
width: 450px;
height: 200px;
border: solid 1px black;
margin: 100px;
display: flex;
justify-content: space-around;
}

#one {
width: 200px;
height: 200px;
border: solid 1px red;
}

#second {
position: static;
visibility: visible;
width: 200px;
height: 200px;
border: solid 1px blue;
}

#main:hover {
animation-duration: 1s;
animation-name: make-small;
animation-fill-mode: forwards;
}

#main:hover #second {
animation-duration: 1s;
animation-name: asd;
animation-fill-mode: forwards;
}
< /code>
В этом примере я хочу, чтобы красный квадрат переместился в середину родительского Div после того, как синий квадрат исчезает с легкостью. Как я могу реализовать это с помощью Tailwind CSS?
Playgrough>

Подробнее здесь: https://stackoverflow.com/questions/794 ... t-movement