Могу ли я анимировать элемент с абсолютным позиционированием с переходом CSS?

Я хочу анимировать изменение позиции элемента с переходом CSS, но он не работает, даже когда я использую переход на свойства all, как в примере здесь: http://jsfiddle.net/yFy5n/3/

Однако я не хочу, чтобы мое окончательное решение применяло переход ко всем свойствам, но вместо этого только в изменении позиции. Таким образом, изменение цвета должно быть мгновенным, только изменение позиции слева направо должно быть анимированным (противоположное тому, что происходит сейчас).

Ответы

Ответ 1

Вы забыли определить значение по умолчанию для left, чтобы он не знал, как оживить.

.test {
    left: 0;
    transition:left 1s linear;
}

Смотрите здесь: http://jsfiddle.net/shomz/yFy5n/5/

Ответ 2

Пожалуйста, используйте этот код margin-left:60px вместо left:60px

пожалуйста, посмотрите: http://jsfiddle.net/hbirjand/2LtBh/ 2/

как сказал @Shomz, переход должен быть заменен на transition:margin 1s linear; вместо transition:all 1s linear;

Ответ 3

попробуйте следующее:

.test {
    position:absolute;
    background:blue;
    width:200px;
    height:200px;
    top:40px;
    transition:left 1s linear;
    left: 0;
}