Safari 12 CSS动画效果不佳

Question

我正在尝试为元素列表设置动画，以使其在呈现到页面时一个接一个地滑动。

即使在Safari 11中，一切都可以在Chrome和Firefox上正常运行，但是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

是一个有用的工具