在 Firefox 中结合 CSS 过渡和动画

Posted

技术标签:

【中文标题】在 Firefox 中结合 CSS 过渡和动画【英文标题】:Combining CSS transition and animation in Firefox 【发布时间】:2017-09-17 23:43:31 【问题描述】:

这是my CodePen,在 Chrome 中运行良好。

.animated-box 
  width: 100px;
  height: 100px;
  margin: 10px auto;
  background: black;
  border-radius: 50px;
  transition-duration: 0.2s;


.animated-box:hover 
  border-radius: 18px;
  animation-name: test;
  animation-duration: 0.7s;
  animation-delay: 0.2s;


@keyframes test 
  0% 
    border-radius: 18px;
  
  12% 
    border-radius: 15px;
  
  41% 
    border-radius: 21px;
  
  70% 
    border-radius: 16px;
  
  100% 
    border-radius: 18px;
  
<div class="animated-box"></div>

但是 Firefox 有一个问题。 如果同时存在 CSS 过渡和 CSS 动画属性,则不会播放动画。 如何让它发挥作用?

.animated-box 选择器制作“out”动画是错误的解决方案,因为该动画将在页面加载后播放。

这里是a video 比较 Firefox 和 Chrome 中的结果。

【问题讨论】:

好吧,你的transition-delay 没有做任何事情,所以我不明白它为什么会在那里? ...如果你想同时做过渡和动画,先把所有代码放进去,然后我们才能说出为什么或如何让它工作 它也可以在 firefox 上运行.. 哪个版本的 firefox 不工作? transition-delay 用于在从圆形过渡到方形结束后制作“反弹”效果 我的 firefox 版本是 52.0.2(64 位)仅适用于“out”转换,“in”转换不起作用 transition: border-radius 1s 与此效果相同。没有“进入”过渡 【参考方案1】:

规范并不完全清楚应该发生什么,所以我相信 Firefox 和 Chrome 在技术上都在遵守它。 最安全的解决方法是不使用过渡和动画的组合,而是在动画中执行所有操作。我将在下面给出一个演示。

背景specification 有一个有用的图,说明在动画延迟期间,应该应用元素的固有样式。此样式由您转换。

现在规范指出

用于关键帧和动画属性的值在动画开始时进行快照。在动画执行期间更改它们无效。

看起来 Firefox(至少在 Linux 上)在应用悬停效果之后对值进行快照,然后将其用作内在样式。这意味着不应用任何过渡。 Chrome 确实执行了转换,将其视为固有样式。

跨浏览器工作解决方案 我们可以在动画中做所有事情,而不是先做一个过渡然后再做一个动画。我已经计算了关键帧应该如何移动和更新你的动画。这也实现了您在 Firefox 中的 Chrome 中看到的效果。

.animated-box 
  width: 100px;
  height: 100px;
  margin: 10px auto;
  background: black;
  border-radius: 50px;


.animated-box:hover 
  border-radius: 18px;
  animation-name: test;
  animation-duration: 0.9s;


@keyframes test 
  0% 
    border-radius: 50px;
  
  22% 
    border-radius: 18px;
  
  32% 
    border-radius: 15px;
  
  54% 
    border-radius: 21px;
  
  77% 
    border-radius: 16px;
  
  100% 
    border-radius: 18px;
  
<div class="animated-box"></div>

【讨论】:

为了让它看起来真的很好,你可能想要改变一些序列并将最后一个值更改为100% border-radius: 50px; ...仍然,加上1 @LGSon 同意,我只是想尽可能地坚持 OP 的内容。 知道了,尽管 OP 在非悬停类上设置了转换属性,这意味着它应该适用于鼠标悬停和悬停。如果你在 Chrome 上查看原始的 codepen,你会看到它是这样做的 @LGSon 好点。为了真正做到这一点,我想我应该保持过渡...... OP还表示动画将在页面加载时运行,所以我不会弄乱我的答案并保持原样。支持您的评论以提高知名度:-)

以上是关于在 Firefox 中结合 CSS 过渡和动画的主要内容,如果未能解决你的问题,请参考以下文章

FireFox 中的同步 CSS3 过渡不平滑

Mozilla Firefox 30.0 上的 CSS3 关键帧过渡动画 CPU 使用率高

fireFox 和 Chrome 在图像上的 transform 属性上 css 过渡渲染的差异

css3过渡(transition)和动画(animation)变换(transform )

css3 过渡延迟,如果动画 svg 填充和颜色同时 chrome 中的错误在 FF 中起作用

带有 href css 动画(横幅)的图像不起作用(仅在 FireFox 中)