चाहिए: सीएसएस एनीमेशन पूर्ण होने के बाद छद्म राज्य शैली परिवर्तन कार्य होवर

Question

क्या सीएसएस एनीमेशन तत्व पर चलने के बाद :hover कार्य जैसे छद्म स्थिति पर निर्दिष्ट शैली परिवर्तन करना चाहिए?

संपादित करें: शायद अधिक बार, मुझे पूछना चाहिए: एनीमेशन पर 'आगे' लागू करने से ओवरराइडिंग से अधिक विशिष्ट शैली में परिवर्तन क्यों रोकता है?

संपादित करें 2: यह पता चलता है कि यह वास्तव में एक क्रॉस ब्राउज़र समस्या है। जैसे क्रोम (मैं संस्करण 38.0.2125.111 चला रहा था) गलत तरीके से व्यवहार करता है लेकिन फ़ायरफ़ॉक्स इसे चश्मे के अनुसार संभालता है।

लंबी कहानी छोटी: चश्मा के अनुसार (जैसा कि नीचे chrona द्वारा उद्धृत किया गया है) !important को ओवरराइड में जोड़ने के लिए शैली को प्रस्तुत करना चाहिए। हालांकि, वर्तमान में, केवल फ़ायरफ़ॉक्स ही इसे सही तरीके से संभालता है।

@keyframes go { 
 
    0% { 
 
    background: green; 
 
    } 
 
    100% { 
 
    background: pink; 
 
    } 
 
} 
 

 
@-webkit-keyframes go { 
 
    0% { 
 
    background: green; 
 
    } 
 
    100% { 
 
    background: pink; 
 
    } 
 
} 
 

 
.box { 
 
    animation: go 3s forwards; 
 
    -webkit-animation: go 3s forwards; 
 
    
 
} 
 

 
.box:hover { 
 
    background: orange!important; 
 
    cursor: pointer; 
 
}

<div class="box">Hover states don't work after animation</div>

मैं कल्पना में इस से संबंधित जानकारी, कुछ भी खोजने में असमर्थ हूँ या तो: http://www.w3.org/TR/css3-animations/

किसी यदि क) इस करना चाहिए पता

यहाँ एक कमी है संभव है? बी) एनीमेशन समाप्त होने के बाद होवर राज्य एक तत्व पर कैसे काम करते हैं?

Answer 1

• एक)

बारे में क्यों यह होता है, मुझे यकीन है के लिए राज्य नहीं कर सकते। लेकिन यह स्पष्ट रूप से animation-fill-mode संपत्ति से संबंधित है जिसे आप forwards पर सेट कर रहे हैं। यही कारण है, परिभाषा के द्वारा, तत्व के दृश्य शैली सेट एनिमेशन के अंतिम फ़्रेम होने के लिए:

आगे
एनीमेशन समाप्त होने के बाद (के रूप में अपनी एनीमेशन-यात्रा गिनती द्वारा निर्धारित), एनीमेशन एनीमेशन समाप्त होने के समय संपत्ति मूल्यों को लागू करेगा।

MDN's definition में थोड़ा और अधिक स्पष्ट है:

आगे
लक्ष्य गणना मूल्यों निष्पादन के दौरान सामना करना पड़ा पिछले फ़्रेम द्वारा निर्धारित बनी रहेगी। पिछले फ़्रेम का सामना करना पड़ा एनीमेशन-दिशा और के मूल्य पर निर्भर करता है एनीमेशन-यात्रा-गिनती:

लेकिन मैं नहीं जानता कि क्यों यह :hover राज्य शैलियों को ओवरराइड करने की अनुमति नहीं है।

• ख)

अब, यह काम करने के लिए कैसे करें के बारे, आप forwards संपत्ति एनीमेशन से हटाने सकता है।इस मामले में, आप, (जब एनीमेशन समाप्त होता है, और दृश्य प्रभाव को हटाता है) एनीमेशन, तो तत्व की मूल स्थिति को पलटने के लिए आवश्यकता होगी रंग है कि आप चाहते हैं कि उसे किया जाना तय है:

@keyframes go { 
 
    0% { 
 
    background: pink; 
 
    } 
 
    100% { 
 
    background: green; 
 
    } 
 
} 
 

 
@-webkit-keyframes go { 
 
    0% { 
 
    background: pink; 
 
    } 
 
    100% { 
 
    background: green; 
 
    } 
 
} 
 

 
.box { 
 
    animation: go 2s; 
 
    -webkit-animation: go 2s; 
 
    -webkit-animation-direction: reverse; 
 
    animation-direction: reverse; 
 
    background: pink; 
 
} 
 

 
.box:hover { 
 
    background: orange; 
 
    cursor: pointer; 
 
}

<div class="box">Hover states don't work after animation</div>

Answer 2

वास्तव में मैं वास्तव में आपके प्रश्न को नहीं समझता, क्या आपको इस तरह के प्रभाव की आवश्यकता हो सकती है? http://jsfiddle.net/abruzzi/5td8w6jx/

@keyframes go { 
    0% { 
     background: green; 
    } 
    100% { 
     background: pink; 
    } 
} 
@-webkit-keyframes go { 
    0% { 
     background: green; 
    } 
    100% { 
     background: pink; 
    } 
} 


.box { 
    animation: go 3s forwards; 
    -webkit-animation: go 3s forwards; 
} 
.box:hover { 
    -webkit-animation: none; 
    background: orange; 
    cursor: pointer; 
} 

हालांकि, ये कोड के साथ, जब आप पाठ mouseout, एनीमेशन पुनरावृत्ति हो जाएगा।

Answer 3

CSS Animations Working Draft

सीएसएस एनिमेशन संपत्ति मानों का परिकलन प्रभावित से उद्धरित। एनीमेशन के निष्पादन के दौरान, किसी संपत्ति के लिए गणना मूल्य एनीमेशन द्वारा नियंत्रित होता है। यह सामान्य स्टाइल सिस्टम में निर्दिष्ट मान को ओवरराइड करता है। एनिमेशन सभी सामान्य नियमों को ओवरराइड करते हैं, लेकिन इन्हें ओवरराइड किया जाता है! महत्वपूर्ण नियम।

और आगे नीचे (Animation Duration) एक सा:

[...] और एक एनीमेशन भरता है कि आगे, 100%-फ़्रेम में निर्दिष्ट मान रख सकेंगे भले ही एनीमेशन तात्कालिक था। इसके अलावा, एनीमेशन घटनाओं को अभी भी निकाल दिया गया है।

जैसा कि आप background को एनिमेट कर रहे हैं, इसे डिफ़ॉल्ट रूप से ओवरराइड नहीं किया जा सकता है (महत्वपूर्ण नियमों को छोड़कर)। यदि आप !important का उपयोग नहीं करना चाहते हैं तो आपको LcSalazar's answer पर जाना चाहिए। (वर्तमान में केवल फ़ायरफ़ॉक्स चश्मा में वर्णित के रूप से प्रतिक्रिया करता है [6 वीं नवंबर 2014])

@keyframes go { 
 
    0% { 
 
    background: green; 
 
    } 
 
    100% { 
 
    background: pink; 
 
    } 
 
} 
 

 
@-webkit-keyframes go { 
 
    0% { 
 
    background: green; 
 
    } 
 
    100% { 
 
    background: pink; 
 
    } 
 
} 
 

 
.box { 
 
    animation: go 3s forwards; 
 
    -webkit-animation: go 3s forwards; 
 
    
 
} 
 

 
.box:hover { 
 
    background: orange !important; 
 
    cursor: pointer; 
 
}

<div class="box">Hover states don't work after animation</div>