Запуск анимации с определенной периодичностью?

Question

[Джон Голт]

Есть циклическая анимация поворта элемента.

@keyframes flipElements{
	0%{transform: rotateY(180deg);}
	50%{transform: rotateY(0deg);}
	100%{transform: rotateY(180deg);}
}

Вызываю ее
animation: flipElements 2s linear infinite;
Как мне сделать таким образом, чтобы эта анимация происходила с периодичностью в 10 секунд, например, а в промежутки между этим элемент оставался в бездействии?

Answer 1

[Андрей Федоров]

Считайте проценты. Они кстати могут быть дробными.

@keyframes flipElements{
  0%{transform: rotateY(180deg);}
  2.5%{transform: rotateY(0deg);}
  5%{transform: rotateY(180deg);}
  100%{transform: rotateY(180deg);}
}

Answer 2

[Даниил Игоревич]

Примерно так, но в моём примере не ровно 10 секунд получается.

animation: flipElements 12s linear infinite;

@keyframes flipElements{
0%{свойства, которые должны быть по умолчанию(если я правильно понял, то это у вас transform: rotateY(180deg)}
83.33%{свойства, которые должны быть по умолчанию}
90%{transform: rotateY(0deg);}
100%{transform: rotateY(180deg);}
}

83.33% - около 10 секунд от 12, последние 2 секунды выполняется поворот.

Answer 3

[Sanan Yuzb]

вот