在 Firefox 中结合 CSS 过渡和动画

Posted 2023-03-06

【中文标题】在 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还表示动画将在页面加载时运行，所以我不会弄乱我的答案并保持原样。支持您的评论以提高知名度:-)