在Firefox中结合CSS过渡和动画

Question

这里是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动画属性，则不会播放动画。 如何使它工作？

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

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

Answer 1

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

背景
的specification具有示出了动画延迟期间，元件的固有样式应该施加一个有用的图。这种风格由你转变。

现在说明书陈述

用于关键​​帧和动画属性的值被在时间动画开始快照。在执行动画期间更改它们不起作用。

它看起来像火狐（至少在Linux上）快照右后悬停效果应用值，然后使用它作为内在风格。这意味着不应用转换。 Chrome确实会执行转换，将其视为内在风格。

跨浏览器的工作液
而是第一，然后做一个过渡动画的，我们可以做动画的一切。我计算了关键帧应该如何移动和更新动画。这也实现了您在Firefox中看到的效果。

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