Когда работает функция линейности в css-анимации?

Question

[tundramani]

var слой = document.createElement("div")
слой.id = "слой_1"
document.body.appendChild(слой)
слой.style.width = "180px"
слой.style.height = "180px"
слой.style.position = "absolute"
слой.style.left = "390px"
слой.style.top = "181px"
слой.style.border = "1px solid White"


слой_1.style.transition = "all 1s cubic-bezier(0.5,-0.5,0.5,1.5) "
слой_1.style.transform = "translate(160px, 0px)"

где-то в коде ошибка
не получается сделать нелинейное смещение

Comments

[alex]

при изменении transition

это как? как transition может анимироваться? в tranition как раз и указывается что и как должно анимироваться. заливайте код в песочницу и показывайте что у вас не получается. надо баннер на странице с созданием вопроса здоровый лепить с напоминанием про песочницу.

[tundramani]

Alex, поправил вопрос

Answer 1

[alex]

судя по вопросу вы все это дело задаете через js.
т.к. песочницу вы не дали, то вангую что это у вас происходит примерно так:

b.style.transition = "all 1s cubic-bezier(0.5,-0.5,0.5,1.5)";
b.style.opacity = "0";
b.style.transform = "scale(2)";

если это так, то это может не работать из-за оптимизаций браузерного рендера. нужно насильно спровоцировать repaint брузера. сделать это можно вот так например:

b.style.transition = "all 1s cubic-bezier(0.5,-0.5,0.5,1.5)";
b.clientWidth; //запрашиваем свойство, тем-самым провоцируем repaint
b.style.opacity = "0";
b.style.transform = "scale(2)";

Comments

[tundramani]

да, я делаю приблизительно так программно
и проблема в том что мне надо чтобы синхронно изменялись несколько свойств:

элемент1.style.transition = "all 0.5s linear"
элемент1.style.opacity = "0"

элемент2.style.transition = "all 1s linear"
элемент2.style.opacity = "0"

по очереди работает нормально
но одновременно нет

[alex]

программист №453, выкладывайте демо в песочницу. вариант где работает и вариант где не работает

Answer 2

[Антон Усачев]

Да вообще со всеми изменяемыми свойствами должна работать. На MDN все это можно почитать. В твоем случае, вероятно, не хватает префиксов. А для opacity можно выставить время побольше и убедиться, что безье вполне себе нормально отрабатывает.