アニメーション塗りつぶしモードが動作しない

Question

あなたがマウスを動かすとその中で飛ぶためのヘッダーを取得しようとしていますが、それはシェイクしなければなりません（両方ともcss3アニメーションで）。それは私が望むやり方でも揺れますが、iveが要素からマウスを削除した後、元のマージン - 右（それはflyinアニメーションの前にあります）に戻ります。-animation-fill-mode：forwards ; chromedevtoolsを見ると、要素はマージンを変更しません（アニメーションは動作しますが..）。これを修正できますか？

また、シェイクアニメーションの後に最初のアニメーションが再び発生するのを防ぐ方法がありますか？アニメーションflyin

：

#name { 
margin:40px 2% 40px 0; 

-webkit-animation:flyin 1.5s; 
-webkit-animation-fill-mode: forwards; 
-webkit-animation-timing-function: ease-in-out; 
-webkit-animation-delay: 1800ms; 
} 

@-webkit-keyframes flyin { 

from{margin-right: 2%;} 
30% {margin-right: 12%;} 
50% {margin-right: 9%;} 
60% {margin-right: 10%;} 
to {margin-right: 10%;} 
} 

揺れアニメーション：

#name:hover { 
     **margin-right: 10%; //i also have to set this?! or it starts at 2%** 
     -webkit-animation:shake 0.7s; 
     -webkit-animation-fill-mode: forwards; 
     -webkit-transform-origin:50% 50%; 
     -webkit-animation-iteration-count: infinite; 
     -webkit-animation-timing-function: linear; 


    } 

    @-webkit-keyframes shake { 
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); } 
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); } 
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); } 
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); } 
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); } 
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); } 
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); } 
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); } 
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); } 
100% { -webkit-transform: translate(2px, 1px) rotate(0deg); } 
} 

Answer 1

がanimation-fill-mode: forwardを設定するアニメーションが実行を完了した後にアニメーションが削除されるまで、アニメーションがその最終的な特性で開催することを意味します。マウスがホバリングを停止すると、-webkit-animationプロパティはデフォルト値（空白）に戻ります。つまり、shakeのアニメーションが削除され、すべてが元の状態に戻ります。最後のプロパティでアニメーションを保持するには、要素に適用されたアニメーションをshakeのままにしておく必要があります。 （つまり、animation-fill-modeは、アニメーションが適用されている場合にのみ有効です）