animation-fill-mode çalışmıyor

Question

Vurgulu hale geldiğinizde ve sonra cıvıldaması gereken bir başlık almaya çalışıyorum (her ikisi de css3 animasyonu ile). İstediğim şekilde uçar, aynı zamanda sallar, ama fareyi öğeden çıkardıktan sonra, orijinali sağ kenarına (flyin animasyonundan önce) döndürdüm. ; Chromedevtools'a baktığımda, öğe hiçbir zaman kenar boşluğunu değiştirmez (animasyon çalışıyor olsa bile ..). Bunu düzeltebilir miyim?

Ayrıca, ilk animasyonun sallama animasyonundan sonra tekrar olmasını önlemek için bir yol var mı?

flyin animasyon:

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

çalkalama animasyon:

#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 ayarlama animasyon yürütme tamamlandıktan sonra animasyon kaldırılıncaya kadar, animasyon nihai özelliklerine sahip olacağı anlamına gelir. Fare gezinmeyi bıraktığında, -webkit-animation özelliği, varsayılan değerine (boş) döner; bu, shake animasyonunun kaldırıldığı ve her şeyin nasıl olduğuyla ilgili olduğu anlamına gelir. Animasyonu son özelliklerinde tutmak için, öğeye shake animasyonunu uygulamanız gerekir. (Başka bir deyişle, animation-fill-mode yalnızca animasyon uygulandığı sürece geçerlidir.)