CSS3 анимация не воспроизводится последовательно

Question

У меня есть простая CSS-анимация, которая выглядит следующим образом:

 @-webkit-keyframes 'move-domo' {
  0%   { bottom: 0px; left: 24px; }
  5%   { bottom: 5px; }
  10%  { bottom: 0px; }
  15%  { bottom: 5px; }
  20%  { bottom: 0px; }
  25%  { bottom: 5px; }
  30%  { bottom: 0px; }
  35%  { bottom: 5px; }
  40%  { bottom: 0px; }
  45%  { bottom: 5px; }
  50%  { bottom: 0px; left: 300px; }
  55%  { bottom: 5px; }
  60%  { bottom: 0px; }
  65%  { bottom: 5px; }
  70%  { bottom: 0px; }
  75%  { bottom: 5px; }
  80%  { bottom: 0px; }
  85%  { bottom: 5px; }
  90%  { bottom: 0px; }
  95%  { bottom: 5px; }
  100% { bottom: 0px; left: 24px; }
 }

В Chrome она работает так, как я ожидал, однако в Safari она работает не так, как яможно было бы ожидать - сначала он проигрывает все «нижние» анимации, а затем в конце просматривает «левую» анимацию.

Поведение можно увидеть на http://kylehayes.me

Answer 1

Safari - правильное поведение.Когда ключевой кадр анимации не указывает значение, он должен использовать значение базового объекта.Chrome интерполирует пропущенные значения ключевого кадра.

Эта анимация правильно сохраняет изображение в его исходном положении, а затем перемещает его в 300px за 15 секунд (50% от всей анимации, которую вы указали в вашей анимации - я посмотрел ваш источник).Затем верните его в исходное положение на следующем ключевом кадре.

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

Answer 2

Попробуйте использовать атрибут "-webkit-transform: translate" вместо атрибутов top, bottom, left, right.