एनीमेशन-फिल-मोड काम नहीं कर रहा है

Question

मैं फ्लाई करने के लिए हेडर प्राप्त करने की कोशिश कर रहा हूं और इसके बाद जब आप इसे घुमाते हैं, तो इसे हिलाएं (सीएसएस 3 एनीमेशन के साथ)। यह जिस तरह से मैं चाहता हूं, वह भी हिलाता है, लेकिन हिच के बाद माउस को तत्व से हटा दिया जाता है, यह मूल मार्जिन-दाएं (यह फ्लाईन एनीमेशन से पहले था) पर वापस जाता है, भले ही ive सेट '-निमेशन-फिल-मोड: आगे ; जब मैं 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 एनीमेशन लागू होने तक ही प्रभावी है।)