アニメーション塗りつぶしモードの後、CSS変換とホバー上のトランジションが機能しません：forwards

Question

私はCSSアニメーションを使用して、ページが読み込まれたときにdivをスライドします。 （Chrome）

私はanimation-fill-mode: forwards;を使用して新しい状態を維持します。

そこから、transform:scale(2);を使用し、1秒以上の遷移を持つ単純なホバーアニメーションを作りたいと思います。

マイCSS：

.box{ 
    background-color:blue; 
    width:100px; 
    height:100px; 
    margin: 0 auto; 
    animation-name: test; 
    animation-duration: 3s; 
    animation-fill-mode: forwards; 
    transition: 1s ease; 
} 

@keyframes test{ 
    0% { 
    transform: translate(-200px) 
    } 
    100% { 
     transform: translate(0px); 
    } 
} 


.box:hover{ 
    transform: scale(2); 
} 

View on Codepen

私はそれが動作border-radiusのようなホバー上の簡単な変更、使用している場合：どういうわけか

.box{ 
    transition: border-radius 0.25s ease; 
} 

.box:hover{ 
    border-radius: 100%; 
} 

を初期CSSアニメーションは、変換に干渉しています/要素のホバー状態の遷移。

私はanimation-fill-modetransform動作しますが、ないトランジション削除するにはホバーを変更する場合：

.box:hover{ 
    animation-fill-mode:none; 
    border-radius: 100%; 
} 

任意のアイデア？

Answer 1

アニメーション塗りつぶしモードが転送の場合、変換が機能しないのはなぜですか？W3C pec 1として

：（強調は私です）

デフォルトでは、アニメーションは（「アニメーション名」プロパティが要素に設定されている）、それが適用されるまでの間にプロパティの値には影響しません実行を開始する時間（ 'animation-delay'プロパティによって決定されます）。また、デフォルトでアニメーションはアニメーションが終了した後のプロパティ値に影響を与えません（ 'animation-duration'プロパティで決まります）。 'animation-fill-mode'プロパティは、この動作を無効にすることができます。

「アニメーション・フィル・モード」の値が「転送」である場合、アニメーションはを終了した後に（その「アニメーション反復カウント」によって決定されるように）、アニメーションを適用しますアニメーションが終了した時間のプロパティ値。

上記は、アニメーションが終了した後でも、要素のtransformを適用して維持する必要があることを意味します。これは、アニメーション内で言及されているtransformが優先されることを意味するので、:hover州内に言及されているtransformは効果がありません。

animation-fill-mode: noneまたはanimation-fill-mode: backwardsが適用されると、その後UAが:hoverセレクタ作品の中に（それは一種のtransform: noneのようになって意味する）のアニメーションが終了した後に変形状態を維持しなければならないので、transformしません。

この現象は、ChromeとFirefoxの最新バージョンで一致しています。IE11およびEdgeでは、:hoverセレクタ内で指定されたtransformは、animation-fill-modeプロパティにどのような値が指定されているかに関係なく影響しません。塗りつぶしモードがnoneに変更されても、とき

---

はなぜ移行が動作しませんか？

CodePenのコードが元のコードであるか、テスト用に変更を加えてもtransitionプロパティが間違って指定されていて、移行が行われない理由がわかりません。

存在しているコードは：

transition: scale 1s ease; 

しかしscaleを移行する必要が性ありません。これは、実行する必要のある変換のタイプに過ぎません。 プロパティはtransformであるため、コードは以下のようにする必要があります：

transition: transform 1s ease; 

この変更を行う場合はanimation-fill-modeが変更された場合、その後transitionが動作します。