Chromeでのみ動作する略語アニメーション

Question

Chromeでは、次のCSS3アニメーションが期待通りに機能し、アウトラインのアニメーションがレンダリングされます。ただし、Internet ExplorerとFirefoxでは、これは機能しません。

@keyframes outline-pulse { 
 
    0% { 
 
    outline: 10px solid green; 
 
    } 
 
    
 
    100% { 
 
    outline: 0px solid green; 
 
    } 
 
} 
 

 
.animate { 
 
    animation: outline-pulse 1s linear 0; 
 
    animation-iteration-count: infinite; 
 
}

<fieldset class="animate"> 
 
    <p>Content</p> 
 
</fieldset>

Answer 1

これは、WDの見落としによるものと思われます。特に、キーフレーム内の略式宣言は考慮されていません。ほとんどの場合、アニメーション化できないコンポーネントプロパティが少なくとも1つ含まれています。実際には、これは間違いエディタconfirmedであること：

はい、私たちは絶対にすべての値が遷移可能であることを意図し、明示的なルールを持っていないものだけ シングルステップ遷移で行くと 。まだ完了していません。

そして、引用されたテキスト2013 WDはEDに更新されているから：

キーフレームルールのキーフレーム宣言ブロックは、プロパティと値で構成されています。 この仕様で定義されたプロパティが

注意今それだけanimation-*特性を除外すること、アニメーションタイミング機能を除いて、これらのルールに無視されます。

IEとFirefoxが仕様に違反しているかどうかは、仕様が成熟に達していないため議論の余地があります。しかし、残念なことに、マイクロソフトではこれを除外しようとしない限り、IEで修正される可能性は非常に低いです。しかし、Microsoft Edgeで修正される可能性は非常に高いです。

その間に、キーフレームに簡略記号を指定しないように注意する必要があります。実際にアニメーション化されるプロパティーのみを変更し、残りは通常のスタイル・ルールで指定します。

Answer 2

Internet ExplorerとFirefoxはこの効果をレンダリング持つために、あなたは、クラス定義にアウトラインを追加する必要があります。 0ピクセルの輪郭は、外観を変更せずに動作させます。

@keyframes outline-pulse { 
 
    0% { 
 
    outline: 10px solid green; 
 
    } 
 
    
 
    100% { 
 
    outline: 0px solid green; 
 
    } 
 
} 
 

 
.animate { 
 
    animation: outline-pulse 1s linear 0; 
 
    animation-iteration-count: infinite; 
 
    outline: 0 solid green; /* important bit */ 
 
}

<fieldset class="animate"> 
 
    <p>Content<p> 
 
</fieldset>

キーフレーム宣言ブロック（強調鉱山）についてCSS Animations明細書に記載ので、これは必要である：

キーフレームルールのキーフレーム宣言ブロックは、プロパティで構成され値。アニメ化することができませんプロパティ「のアニメーション・タイミング関数」を除いて、これらのルールでは無視され、

@Harryはコメントで指摘するように、outline-styleプロパティがアニメーション可能ではありません、そして、それはですキーフレーム宣言の存在は、仕様で定義されているInternet ExplorerとFirefoxでは無視されます。したがって、表示するには、クラス宣言でoutline-styleを宣言する必要があります。