Не получается правильно написать transition

[IvanRu08]

Доброго времени суток. Есть 2 свойства transition:

top: 0
transform: rotate(45deg)
transition-property: top, transform
transition-duration: 0.5s, 0.5s

Объединяю их вот таким образом:

top: 0
transform: rotate(45deg)
transition: top .5s, transform .5s

В итоге, свойство top выполняется одновременно с transform. В чем может быть ошибка?

Edited October 27, 2017 by IvanRu08

[Q4Dizzy]

  On 10/27/2017 at 1:45 PM, IvanRu08 said:

transition: top .5s, transform .5s

Expand  

Так вы написали transition для 2 свойств. И используете их оба сразу. Что именно смущает? Точнее какого эффекта пытаетесь добиться?

 

Edited October 27, 2017 by Q4Dizzy

[IvanRu08]

  On 10/27/2017 at 1:51 PM, Q4Dizzy said:

Так вы написали transition для 2 свойств. И используете их оба сразу. Что именно смущает? Точнее какого эффекта пытаетесь добиться?

 

Expand  

Пытаюсь, чтобы сначала выполнился top, а затем уже rotate

[Q4Dizzy]

Хотя нет, вот более верный способ. Писал на скорую руку, нужно добавить правила для разных браузеров..

http://jsfiddle.net/8tagegvw/

Edited October 27, 2017 by Q4Dizzy

[SnowSilver]

если вы хотите, чтоб сначала выполнялась свойство top, а после transform, вам для свойства transform нужно поставить задержку, перед началом выполнения, которая равна времени выполнения анимации для свойства top

top: 0

transform: rotate(45deg)

transition: top .5s, transform .5s ease 0.5s

Edited October 29, 2017 by SnowSilver