Combining CSS transition and animation in Firefox - css

Question

Here is my CodePen that works fine in 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>
But there is a problem in Firefox.
It doesn't play the animation if there are both CSS transition and CSS animation properties.
How to make it work?
Making "out" animation to .animated-box selector is wrong solution because this animation will play after page loading.
Here is a video comparing the result in Firefox and Chrome.

Answer 1

The specification is not entirely clear on what should happen, so I believe that both Firefox and Chrome are technically adhering to it. The safest fix is to not use a combination of transition and animation, but instead do everything in the animation. I'll give a demo of that below.
Background
The specification has a helpful figure that illustrates that during the animation delay, the intrinsic style of the element should be applied. This style is transitioned by you.
Now the specification states that
The values used for the keyframes and animation properties are snapshotted at the time the animation starts. Changing them during the execution of the animation has no effect.
It looks like Firefox (at least on Linux) snapshots the value right after the hover effect is applied and then uses that as the intrinsic style. This means that no transition is applied. Chrome does indeed execute the transition, treating that as the intrinsic style.
Cross-browser working solution
Instead of doing a transition first and then an animation, we can do everything in the animation. I have calculated how the keyframes should shift and updated your animation. This achieves the effect you were seeing in Chrome in Firefox as well.
.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>