Safari 12 css 动画效果不佳

Posted 2023-03-05

【中文标题】Safari 12 css 动画效果不佳

【英文标题】：Safari 12 css animations not working well

【发布时间】：2019-04-12 12:42:49

【问题描述】：

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

在 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();  
  );
);

编辑：

我已经解决了这个问题：事实证明，我所要做的就是从 slide-in 中删除 transform: translateY(60px);。显然 safari 在动画结束时使用了这种样式来覆盖最终值。这很奇怪，因为视觉上看起来不对，但活动区域和一切都很好。

【问题讨论】：

嗨@Crysfel，您找到解决此问题的方法了吗？目前也在尝试修复它。

是的！事实证明，我所要做的就是从slide-in 中删除transform: translateY(60px);。显然 safari 在动画结束时使用了这种样式来覆盖最终值。这很奇怪，因为视觉上看起来不对，但活动区域和一切都很好。

太棒了！感谢@Crysfel 解决了我的问题。

这是一个非常奇怪的修复，因为 animation-fill-mode: forwards 应该在动画结束时应用了你的样式...我想知道 Safari 12 是否有动画问题-填充模式？

没错，应该！它确实在 Chrome、Firefox 甚至 Safari 11 中应用了正确的样式。这只是 Safari 12 中的错误

【参考方案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

【讨论】：

谢谢！但是 Safari 12 已经支持上面所有的 css，问题是别的 :(