FirefoxでのCSSトランジションとアニメーションの組み合わせ

Question

ここではChromeで問題なく動作するmy CodePenです。

.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セレクタに「出力」アニメーションを作成すると、このアニメーションはページ読み込み後に再生されるため、間違った解決策です。

ここにはFirefoxとChromeの結果を比較したa videoがあります。

Answer 1

何が起こるべきかについて完全にはっきりしていないので、FirefoxとChromeの両方が技術的にそれを守っていると私は信じています。 最も安全なのは、トランジションとアニメーションの組み合わせを使用せず、代わりにアニメーションのすべてを実行することです。私はそれのデモを下に与えます。

背景
specificationアニメーション遅延の間、素子の固有のスタイルが適用されるべきであることを示す人図を有しています。このスタイルはあなたによって移行されます。

今仕様は、キーフレームアニメーションプロパティに使用

値は、アニメーションが開始時にスナップショットされていることを述べています。アニメーションの実行中にそれらを変更しても効果はありません。

（少なくとも、Linux上）Firefoxは右後のホバー効果が適用された後、本来のスタイルとしてあることを利用している値をスナップショットのように見えます。これは、遷移が適用されないことを意味します。クロムは実際に移行を実行し、それを固有のスタイルとして扱います。

クロスブラウザワーキング溶液
代わりの最初にして、アニメーションをトランジションをやって、私たちはアニメーションですべてを行うことができます。キーフレームがアニメーションをどのようにシフトして更新するかを計算しました。これにより、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>