Как в js создается @keyframe?

Question

[Ingernirated]

Как в js создать @keyframe и добавить анимацию к элементу?
И если надо выполнить 2 анимации на двух элементах, как сделать так, чтобы 2-ая начала выполняться только тогда, когда первая закончилась?
animation: move 0.5s ease;

@keyframes move{
	from{top:-10%;}
	to{20%;}
}

var e1 = document.querySelector(".e1");
var e2 = document.querySelector(".e2");

Comments

[Сергей delphinpro]

Написать нормально в css, а в js просто добавлять класс, на который подвешена анимация.

[alex]

Как в js создать @keyframe

не извращайтесь, пишите в css. если хотите анимацию на js для этого есть либы, например popmotion gsap velocityjs

2-ая начала выполняться только тогда, когда первая закончилась?

onanimationstart/onanimationend

Answer 1

[Philipp]

https://blog.andyet.com/2015/07/17/generating-css-...

Answer 2

[Александр Фёдорцев]

сделать так, чтобы 2-ая начала выполняться только тогда, когда первая закончилась

<br><button id="b1">Botton1</button>
<br><button id="b2">Botton2</button>

<style>
  button {
    transition-property: background-color;
    transition-duration: 3s;
  }
</style>

<script>
  function repaint(id){
  	let el=document.getElementById(id);
  	if(!el.style.backgroundColor){ el.style.backgroundColor = 'red'; return;}
  	if(el.style.backgroundColor === 'red'){ el.style.backgroundColor = 'blue'; return;}
  	if(el.style.backgroundColor === 'blue'){ el.style.backgroundColor = 'red'; return;}
  }

  window.addEventListener('load', ()=>{
  	repaint('b1');
  });

  document.getElementById('b1').addEventListener('transitionend', ()=>{
  	repaint('b2');
  });

  document.getElementById('b2').addEventListener('transitionend', ()=>{
  	repaint('b1');
  });

</script>

Comments

[Ingernirated]

Подскажи пожалуйста, как сделать в этом коде так, чтобы функция вызвалась лишь по окончанию следующей анимации, а то выполняется первая, а после вторая и третья практический одновременно.

var x = 0;
function move() {
	if(x == 0) {
	var box = document.querySelector(".box");
	box.style.transition = "1s linear";
	box.style.top = "200px";
	box.style.opacity = "1";
	}
	else if(x == 1) {
	var box2 = document.querySelector(".box2");
	box2.style.transition = "1s linear";
	box2.style.top = "200px";
	box2.style.opacity = "1";
	}
	else if(x == 2) {
	var box3 = document.querySelector(".box3");
	box3.style.transition = "1s linear";
	box3.style.top = "200px";
	box3.style.opacity = "1";
	}
	else {
	}
	x++;
	console.log(x);
	window.addEventListener("transitionend", move);
}
window.addEventListener("load", move);

[Александр Фёдорцев]

Ingernirated: Явных ошибок не вижу. Попробуйте window.addEventListener("transitionend", move) вынести из move. И запуск колбека addEventListener, я делаю так ()=>move(), конечно привычка, но вдруг...
И, используя window.addEventListener убедитесь, что у вас нет других событий "transitionend", иначе делайте document.querySelector(".box N").addEventListener("transitionend", ...