transition-duration для top & left не плавно двигается
#one {
width: 100px;
height: 50px;
transition: top 1s, left 1s;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}<div onclick="document.querySelector('#one').classList.toggle('centered');" style='background: red' id='one'></div>Плавно не хочет работать...
Ответы (1 шт):
Автор решения: Az Rieil
→ Ссылка
Попробуйте установить начальное значение равное нулю
.one {
width: 50px;
height: 50px;
transition: top 1s linear, left 1s linear;
background: red;
left: 0;
top: 0;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}