Анимация CSS: Центр абсолютный div диагональ ⇐ CSS

[Anonymous]

У меня есть 4 квадратных DOV, абсолютные позиции в каждом углу на странице. Мне нужно анимировать их, чтобы расслабиться в центр, чтобы сформировать круг. У меня тяжелое время, пытаясь выяснить, как вы бы переместили их по диагонали в центр. У меня есть код ниже для моих HTML и CSS. 50% для одной стороны на каждой. Таким образом, когда они перемещаются по диагонали в центр, они могут объединиться, чтобы в конечном итоге сформироваться в круг. Основная проблема - это просто выяснить, как заставить их облегчить по диагонали в центр. Для достижения этого в комментариях в коде CSS. < /p>




CSS
/* Layout */
div {
width: 100px;
height: 100px;
animation-name: squareCircle;
animation-duration: 5s;

animation-delay: 1s;
/* animation-iteration-count: infinite; */
transition: background-color 5s ease;
}

@keyframes squareCircle {
to {
background-color: black;
}
}

.square_one {
position: absolute;
top: 0;
left: 0;
animation-name: squareOne;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-bottom-right ease 4s;
/* transition: translate 4s; */
/* transform: translate(-50%,-50%); */

}

@keyframes squareOne {
to {
border-bottom-right-radius: 50%;
/* transform: translate(-50%,-50%); */
}
}

.square_two {
position: absolute;
top: 0;
right: 0%;
animation-name: squareTwo;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-bottom-left ease 0.5s;
}

@keyframes squareTwo {
to {
border-bottom-left-radius: 50%;
}
}

.square_three {
position: absolute;
bottom: 0%;
left: 0;
animation-name: squareThree;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-top-right ease 0.5s;
}

@keyframes squareThree {
to {
border-top-right-radius: 50%;
}
}

.square_four {
position: absolute;
bottom: 0%;
right: 0%;
animation-name: squareFour;
animation-duration: 5s;
animation-delay: 0.5s;
transition: border-top-left-radius ease 5s;
}

@keyframes squareFour {
to {
border-top-left-radius: 50%;
}
}

/* Block */

.square_one {
background-color: lightcoral;
}

.square_two {
background-color: lightblue;
}

.square_three {
background-color: lightgreen;
}

.square_four {
background-color: lightgoldenrodyellow;
}


Подробнее здесь: https://stackoverflow.com/questions/653 ... diagonally