在Firefox中结合CSS转换和动画

Question

以下my CodePen适用于Chrome。

＆＃13;

＆＃13;

.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;
  }
}

＆＃13;

<div class="animated-box"></div>

＆＃13;

＆＃13;

＆＃13;

但Firefox中存在问题。 如果同时存在CSS过渡和CSS动画属性，它就不会播放动画。 如何使它工作？

制作＆＃34; out＆＃34;动画到.animated-box选择器是错误的解决方案，因为此动画将在页面加载后播放。

以下a video比较了Firefox和Chrome中的结果。

Answer 1

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

<强>背景
specification有一个有用的数字，说明在动画延迟期间，应该应用元素的内在风格。这种风格由你过渡。

现在规范说明了

  

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

看起来Firefox（至少在Linux上）在应用悬停效果后将值快照，然后将其用作内在样式。这意味着不应用任何转换。 Chrome确实执行了转换，将其视为内在风格。

跨浏览器工作解决方案
我们可以在动画中完成所有操作，而不是先进行转换，然后再进行动画处理。我已经计算了关键帧应该如何移动和更新动画。这也实现了您在Firefox中看到的效果。

＆＃13;

＆＃13;

.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;
  }
}

＆＃13;

<div class="animated-box"></div>

＆＃13;

＆＃13;

＆＃13;