Возможно ли задавать разный delay для нескольких значений transform?

Question

[kode_krendel]

На примере div-3 - codepen.io/kodekrendel/pen/ryVpqr

Можно ли задать задержку для rotate(360deg) отдельно от translate(-24.8em,0em)?
Т.е. чтоб блок сначала переместился, а потом, скажем через 1s отработал rotate(360deg)?

transition-delay тут не работает.

Answer 1

[Егор Живагин]

"transition-delay тут не работает."
Честно говоря, мне лень проверять сейчас в codepen, но такие слова кажутся преждевременными.

transition-delay
"Допустимо указывать несколько значений, перечисляя их через запятую. Каждое значение будет применяться к свойству, заданному в параметрах transition-property."
transition-property

Пробуйте

UPD
Я понял проблему. Можно попробовать вынести анимации в @keyframes

Comments

[kode_krendel]

Ок, вижу апдейт. До keyframes еще не дошел. Т.е. в рамках transition-delay это не решается?

[Егор Живагин]

kode_krendel: обновил. "В рамках transform" , если я правильно понимаю эти ваши рамки, это не будет корректно работать.

В keyframes ничего сложного нет, эти анимации за 15 минут сделать можно

Answer 2

[Артём]

animation-delay не пробовали?

Comments

[kode_krendel]

Как? Вот так? transform: translate(-24.8em,0em) rotate(360deg);
animation-delay: 0, 1s; Не работает.

[Артём]

kode_krendel: htmlbook.ru/css/animation-delay

[kode_krendel]

Я честно говря, еще до keyframes и animation еще не дошел. В рамках transform мою задау выполнить невозможно?