Safari 12 css動畫效果不佳

Question

我正在嘗試動畫一個元素列表，以便在渲染到頁面時一個接一個地滑動。

一切都適用於Chrome和Firefox，即使在Safari 11工作得很好，但safari 12也不能很好地完成動畫。

如下圖所示，當動畫完成時，所有項目應與頂部對齊，但由於某些原因，僅在Safari 12中，項目是隨機呈現的。 除此之外，按鈕上的鼠標已關閉。

您可以在這里查看問題： https ： //codepen.io/crysfel/pen/GwoQxE （確保打開safari 12的鏈接）

我認為css非常標准：

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-in {
  opacity:0;
  transform: translateY(60px);
  animation: slideIn ease 1;
  animation-fill-mode: forwards;
  animation-duration: 175ms;
}

和一個簡單的JavaScript一個接一個地動畫項目：

function animateIn() {
  $('ul li').each(function(index) {
    $(this).removeClass('slide-in');
    setTimeout(() => {
      $(this).addClass('slide-in');
    }, 50 * index)
  })
}


$(() => {

  animateIn();

  $('#show').click(function() {
    animateIn();  
  });
});

編輯：

我已經解決了這個問題 ：事實證明我所要做的就是刪除transform: translateY(60px); 從slide-in 。 顯然，safari在動畫結束時使用該樣式覆蓋最終值。 這很奇怪，因為視覺上看起來不對，但活動區域都很好。

Answer 1

您可能需要為關鍵幀和Safari的動畫添加前綴。 使用這樣的東西：

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@-webkit-keyframes slideIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(60px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
.slide-in {
  opacity:0;
  transform: translateY(60px);
  -webkit-transform: translateY(60px);
  animation: slideIn ease 1;
  -webskit-animation: slideIn ease 1;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  animation-duration: 175ms;
  -webkit-animation-duration: 175ms;
} 

一個有用的工具是shouldiprefix.com