0

#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 ответ 1

0

Попробуйте установить начальное значение равное нулю

.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%);
}

Fiddle.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.