CSS3 एनीमेशन के अंत में अंतिम स्थिति बनाए रखना

Question

मैं opacity: 0;CSS में सेट किए गए कुछ तत्वों पर एक एनीमेशन चला रहा हूं । एनीमेशन वर्ग onClick लागू किया जाता है, और मुख्य-फ़्रेम का उपयोग करते हुए, इसे से अस्पष्टता में परिवर्तन 0करने के लिए 1(अन्य बातों के अलावा)।

दुर्भाग्य से, जब एनीमेशन खत्म हो जाता है, तो तत्व वापस opacity: 0(फ़ायरफ़ॉक्स और क्रोम दोनों में) जाते हैं। मेरी स्वाभाविक सोच यह होगी कि एनिमेटेड तत्व अपनी मूल संपत्तियों को पछाड़कर अंतिम स्थिति बनाए रखते हैं। क्या यह सच नहीं है? और यदि नहीं, तो मुझे ऐसा करने का तत्व कैसे मिल सकता है?

कोड (उपसर्ग संस्करण शामिल नहीं):

@keyframes bubble {
    0%   { transform:scale(0.5); opacity:0.0; }
    50%  { transform:scale(1.2); opacity:0.5; }
    100% { transform:scale(1.0); opacity:1.0; }
}

Comments

मैं अपनी खुद की दोहराने की सूचना पोस्ट करूँगा: stackoverflow.com/questions/9196694/css3-animation-scale कम से कम मेरा एक अधिक शिक्षाप्रद शीर्षक है!

— Dan

CSS3 के

— माइकल मुलानी

Answer 1

जोड़ने का प्रयास करें animation-fill-mode: forwards;। इस तरह के उदाहरण के लिए:

-webkit-animation: bubble 1.0s forwards; /* for less modern browsers */
        animation: bubble 1.0s forwards;

Comments

हाँ, यह बात है। जब मैं कर सकता हूं तो आपके जवाब की जांच करूंगा। यदि कोई सीएसएस-सिर आवश्यक होने के पीछे तर्क पर टिप्पणी करना चाहता है, तो मुझे जानना अच्छा लगेगा!

— डैन

आप यहां एनीमेशन-फिल-मोड प्रॉपर्टी के बारे में पढ़ सकते हैं - dev.w3.org/csswg/css3-animations/#animation-fill-mode-property उम्मीद है कि मदद करता है!

— क्रिस्टोफर विलेंडर

@ संपत्ति का forwardsमूल्य animation-fill-modeसुनिश्चित करता है कि तत्व एनीमेशन समाप्त होने के बाद एनीमेशन के अंतिम कीफ्रेम स्थिति को बनाए रखेगा । उदाहरण के लिए यदि आपका एनीमेशन width0 से 100px तक बदलता है, तो यह संपत्ति सुनिश्चित करती है कि एनीमेशन समाप्त होने के बाद तत्व 100px चौड़ा रहता है।

— फ़रज़ाद YZ

100% / toबिंदु को निर्दिष्ट करने के लिए मत भूलना @keyframeअन्यथा यह काम नहीं करेगा।

— टॉमाज़ मूलरस्क

एनीमेशन-फिल-मोड: फॉरवर्ड ने मेरे लिए भी चाल

— चली

Answer 2

यदि आप अधिक एनीमेशन विशेषताओं का उपयोग कर रहे हैं, तो शॉर्टहैंड है:

animation: bubble 2s linear 0.5s 1 normal forwards;

यह देता है:

• 2s अवधि
• linear समय-समारोह
• 0.5s विलंब
• 1 पुनरावृत्ति-गणना (अनंत हो सकती है)
• normal दिशा
• forwards भरण-मोड (अंतिम स्थिति के रूप में अंतिम स्थिति का उपयोग करने के लिए अनुकूलता चाहते हैं, तो पीछे की ओर सेट करें)

Answer 3

यदि का उपयोग नहीं लघु हाथ संस्करण: मेक यकीन animation-fill-mode: forwardsहै के बाद एनीमेशन घोषणा या यह काम नहीं करेगा ...

animation-fill-mode: forwards;
animation-name: appear;
animation-duration: 1s;
animation-delay: 1s;

बनाम

animation-name: appear;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-delay: 1s;

Comments

आप सही हे। मेरे उत्तर को अपडेट किया। धन्यवाद, इसने मेरे मन को मार दिया।

— टेलर ए। लीच

Answer 4

एनीमेशन-भरण-मोड का उपयोग करें : आगे की ओर;

animation-fill-mode: forwards;

तत्व अंतिम कीफ़्रेम द्वारा निर्धारित शैली मूल्यों को बनाए रखेगा (एनीमेशन-दिशा और एनीमेशन-पुनरावृत्ति-गणना पर निर्भर करता है)।

नोट: @ एक्सप्लोरर नियम Internet Explorer 9 और पुराने संस्करणों में समर्थित नहीं है।

काम करने का उदाहरण

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 3ss forwards; /* Safari 4.0 - 8.0 */
  animation: bubble 3s forwards;
  /* animation-name: bubble; 
  animation-duration: 3s;
  animation-fill-mode: forwards; */
}

/* Safari */
@-webkit-keyframes bubble  {
  0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

/* Standard syntax */
@keyframes bubble  {
   0%   { transform:scale(0.5); opacity:0.0; left:0}
    50%  { transform:scale(1.2); opacity:0.5; left:100px}
    100% { transform:scale(1.0); opacity:1.0; left:200px}
}

<h1>The keyframes </h1>
<div></div>