2

есть анимация

@keyframes sprite-x {
  0% { background-position-x: 0; }
  100% { background-position-x: -8192px;}
 }


 .element {
  width: 1638px;
  height: 473px;
  background-image: url('image');
  background-repeat: none;
  animation:
    sprite-x 0.5s steps(6) infinite,

 }

Нужно чтобы примерно на 90% этой анимации запустилась заново она, но первая при этом не прерывается, а доигрывается до конца, а потом прекращается. И так бесконечно: на 90% запускается одна и та же анимация без останова предыдущей, пока последняя не доиграет до конца.

введите сюда описание изображения Горизонтальная шкала это время анимации

1 ответ 1

2

В свойстве animation-delay укажи два значения через запятую. Возможно, придётся изменить анимации таким образом, чтобы они имели равную длительность.

11
  • так анимация одна и таже - соотвественно длительность одинаковая
    – ruslik
    30 авг 2016 в 9:01
  • @ruslik, видимо я чего-то не понимаю и следует уточнить вопрос...
    – Qwertiy
    30 авг 2016 в 9:02
  • всегда проигрывается одна и та же анимация, только на 90% первого проигрывания запускается анимация второй раз, но первая при этом не прекращается а доигрывает до конца и так в цикле
    – ruslik
    30 авг 2016 в 9:08
  • Если запустить ещё раз ту же анимацию, то анимироваться должны будут те же свойства. Как ты хочешь одновременно анимировать одни и те же свойства? И в вопросе я вижу две анимации.
    – Qwertiy
    30 авг 2016 в 9:10
  • то есть нужны 2 блока с анимацией и показывать поочередно
    – ruslik
    30 авг 2016 в 10:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.