Задержка анимации CSS и поведение игрового состояния

Я пытаюсь захватить определенный момент в анимации элементов. Значение. Я хочу, чтобы анимация начала и остановилась в точке X (позволяет начать и остановить вторую 5 из 100-секундной анимации).

Вот мой снимок JSFiddle

@-webkit-keyframes background {
  from { background: yellow; }
  100% {
    background: blue;
  }
}

div {
  -webkit-animation-name: background;
  -webkit-animation-duration: 100s;
  -webkit-animation-fill-mode: forwards;
  -webkit-animation-delay: -40s;
  -webkit-animation-play-state: paused;
}

Это, кажется, отлично работает в Chrome и Firefox, но, похоже, не работает в Safari и IE (нет, правильно?!) Примечание. Я оставил префикс специально для его проверки в Safari.

В отличие от Chrome, кажется, что анимация никогда не запускается в Safari и остается на начальном шаге.

Это известная проблема? Есть ли способ обхода или другой способ реализовать это?

ОБНОВЛЕНИЕ/РАЗЪЯСНЕНИЯ

Мне нужно, чтобы уметь фиксировать конкретную рамку анимации. Откройте мою скрипку в Chrome и поиграйте с атрибутом задержки анимации в моей скрипке (убедитесь, что она осталась отрицательной). Вы увидите, что вы можете поймать 1 конкретный кадр анимации. Это именно то, что мне нужно. Моя проблема в том, что это не работает в Safari.

Ответы

Ответ 1

Как насчет создания анимации ключевого кадра в 5 секунд и убедитесь, что есть "100 мс в процентах", где кадры одинаковы.

Поскольку масштаб анимации для времени в процентах, мы можем вычислить, что 100 мс /5000 мс равно 2%/100%.

div {
    background:#333;
    padding:10px;
    width:100px;
    height:100px;
    color:#fff;
    animation-name: animateAndPause;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}
@keyframes animateAndPause {
    0% { 
     -ms-transform: rotate(0deg); /* IE 9 */
     -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
     transform: rotate(0deg);
    }
    98% {      
     -ms-transform: rotate(360deg); /* IE 9 */
     -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
     transform: rotate(360deg); 
    }   
   100% { 
     -ms-transform: rotate(360deg); /* IE 9 */
     -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
     transform: rotate(360deg);    
    }
}

для демонстрации, jsfiddle имеет более длительную паузу, 500 мс.

https://jsfiddle.net/bfu9wvxt/5/

Ответ 2

Если вы хотите, чтобы ваша анимация останавливалась и начиналась с определенной точки, вам нужно больше ключевых кадров:

@-webkit-keyframes background {
    0% { background: yellow; }
    /* When You Want */% { background: /* A different color in-between yellow and blue! */; }
    /* When You Want */% { background: /* A different color in-between yellow and blue! */; }
    100% { background: blue; }
}
div {
    -webkit-animation-name: background;
    -webkit-animation-duration: 100s;
    -webkit-animation-timing-function: ease;
}

Замените первый /* When You Want */% на процент от продолжительности анимации, где вы хотите остановить.

Замените второй /* When You Want */% на процент от продолжительности анимации, когда вы хотите, чтобы он начинался снова.

Замените оба вхождения /* A different color in-between yellow and blue! */ тем же цветом, цвет между желтым и синим.

Ответ 3

Попробуйте этот код: Совместим со всеми браузерами, особенно сафари.

div {
  width: 100%;
  background-color: #fff;
  position: relative;
  -webkit-animation-name: example;
  /* Chrome, Safari, Opera */
  -webkit-animation-duration: 5s;
  /* Chrome, Safari, Opera */
  -webkit-animation-delay: 5s;
  /* Chrome, Safari, Opera */
  animation-name: example;
  animation-duration: 5s;
  animation-delay: 5s;
  -webkit-animation-iteration-count: 100;
  /* Chrome, Safari, Opera */
  animation-iteration-count: 100;
  
}
/* Chrome, Safari, Opera */

@-webkit-keyframes example {
  25% {
    background-color: blue;
  }
  50% {
    background-color:yellow ;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
}
/* Standard syntax */

@keyframes example {
  25% {
    background-color: blue;
  }
  50% {
    background-color:yellow ;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: blue;
  }
}

<div>Color bar</div>

Ответ 4

Это должно работать в Safari: Fiddle

    @-webkit-keyframes change {
      0% { background-color: yellow; }
      100% { background-color: blue; }
    }

    div {
        -webkit-animation-name: change;
        -webkit-animation-delay: 0s;
        -webkit-animation-duration: 5s;
        -webkit-animation-play-state: running;
        -webkit-animation-timing-function: cubic-bezier(0.29, 0.3, 0.86, 0.99);
    }

Игра с кривой кубического безье может повторить анимацию остановки, начиная с 5 секунд из 100, но будет довольно сложно начать и остановить анимацию без javascript.