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