animazione-riempimento-modalità non funzionante

Question

Sto cercando di ottenere un'intestazione per volare dentro e dopo che al passaggio del mouse, dovrebbe scuotere (entrambi con animazione css3). Vola nel modo in cui voglio, scuote anche, ma dopo che ive ha rimosso il mouse dall'elemento ritorna al margine originale-destra (aveva prima dell'animazione flyin) anche se ive imposta `-animation-fill-mode: avanti ; Quando guardo in chromedevtools l'elemento non cambia mai il suo margine destro (anche se l'animazione funziona ..). Posso risolvere questo problema?

Inoltre, c'è un modo per impedire che la prima animazione si ripresenti dopo l'animazione dello shake?

flyin animazione:

#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%;} 
} 

shake animazione:

#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

Impostazione animation-fill-mode: forward significa che dopo completata l'animazione esecuzione, l'animazione terrà presso le sue caratteristiche solo l'animazione viene rimosso. Quando il mouse smette di passare con il mouse, la proprietà -webkit-animation ritorna al suo valore predefinito (vuoto), il che significa che l'animazione shake viene rimossa e tutto ritorna a come era. Per mantenere l'animazione nelle proprietà finali, è necessario mantenere l'animazione shake applicata all'elemento. (In altre parole, animation-fill-mode è efficace solo finché l'animazione è applicata.)