Не работает transition при right 0

#html #css #css_animation

Добрый день.

Есть такая проблема при наведении на блок с position: absolute он должен плавно переехать
в правую сторону right: 0, но у меня не получается это сделать думал что transition
это исправит.

Вот код https://jsfiddle.net/j9zz6uxp/

.position{
    display: block;
    position: absolute;
    width: 56px;
    height: 66px;
    background: red;
    top: 20px;
    left: 120px;
    margin-left: -28px;
    transition: all 1.1s;
    z-index: 999;
}

.position:hover{
    margin-left:auto;
    right: 0;
}


Прошу вашей помощи.
    

Ответы

Ответ 1

.position{
    display: block;
    position: absolute;
    width: 56px;
    height: 66px;
    background: red;
    top: 20px;
    left: 120px;
    margin-left: -28px;
    transition: all 1.1s ease-in-out;
    z-index: 999;
}

.position:hover{
  margin-left:auto;
  left: 100%;
}







Вы с left на right меняете св-во при наведении, а нужно что-то одно


Ответ 2

Transition не работает, так как, вы не определили right у .position. Чтобы он стал
работать, можно сделать так:



.position{
    display: block;
    position: absolute;
    width: 56px;
    height: 66px;
    background: red;
    top: 20px;
    right: calc(100vw - 120px);
    margin-left: -28px;
    transition: all 3s;
    z-index: 999;
}

.position:hover{
  margin-left:auto;
  transition: all 3s;
  right: 0;
}