सीएसएस दृश्यता एनिमेशन काम नहीं कर रहा

मैं दृश्यता सीएसएस संपत्ति पर एक कीफ्रेम आधारित एनीमेशन करना चाहता हूं। मैंने शुरुआत में इसे 'डिस्प्ले' पर आज़माया लेकिन पाया कि 'डिस्प्ले' पर एनीमेशन समर्थित नहीं है लेकिन 'दृश्यता' है। विचार आयत की दृश्यता को टॉगलिंग रखने के लिए है। मैं jquery का उपयोग नहीं करना चाहता हूं और सीएसएस में इसे पूरा करना चाहता हूं। बाद मेरी कोड है, लेकिन इसे और प्रदर्शन आयत के अपेक्षित परिणाम नहीं दे करता है 5 वीं दूसरे तक छिपा शेष, प्रदर्शित होने और उसके बाद फिर एनीमेशन के अंतसीएसएस दृश्यता एनिमेशन काम नहीं कर रहा

<head> 
     <style type="text/css"> 
    #layer1 {    
       -moz-animation-duration: 10s;     
     -moz-animation-name: toggle; 
    } 

    @-moz-keyframes toggle { 
      from { 
       visibility:hidden; 
      } 

     50% { 
        visibility:visible; 
      } 

     to { 
     visibility:hidden; 
      } 
    } 

    </style> 

    <script type="application/javascript"> 
     window.onload = function()    
     { 
      var c = document.getElementById('layer1'); 
      var ctxt = c.getContext('2d'); 
      ctxt.fillStyle = 'red'; 
      ctxt.fillRect(0,0,200,200); 
      ctxt.fillStyle = 'green'; 
      ctxt.fillRect(0,0,100,100); 
     } 

    </script>

<body> 

     <canvas id="layer1" width="200" height="200" >   
    </canvas> 

    </body> 


</html>

स्रोत

2011-10-22 Raks

दृश्यता में गायब () संपत्ति एनिमेटेड नहीं किया जा सकता है। एक तत्व या तो दृश्यमान है या नहीं। बजाय opacity संपत्ति का प्रयास करें:

@-moz-keyframes toggle { 
    from { 
     opacity:0; 
    } 

    50% { 
     opacity:1; 
    } 

    to { 
     opacity:0; 
    } 
}

स्रोत

2011-10-22 07:26:48 JJJ

पर अपने ब्लॉग पोस्ट देखें। यहां तक कि सफारी दस्तावेज भी उल्लेख करता है कि दृश्यता एनिमेटेड हो सकती है http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transitions/Transitions.html#//apple_ref/doc/uid/TP40008032-CH4 -SW1। मैंने 200 9 में मोज़िला के लिए एक बीयूजी फिक्स भी देखा जो दृश्यता – Raks

दृश्यता पर एनीमेशन को ठीक करता है, ठीक है। लेकिन एक दृश्य प्रभाव बनाने के लिए नहीं। आपको इसे "सत्य" एनिमेटेबल गुणों के साथ उपयोग करना होगा। एनीमेशन प्रॉपर्टी के रूप में दृश्यता का उपयोग कब और कैसे करें, आप देख सकते हैं @ http://www.greywyvern.com/?post=337 –

एक सीएसएस संक्रमण या दृश्यता संपत्ति पर एनीमेशन संक्रमण की अवधि के लिए तत्व दिखाई रहता है और फिर अचानक नया मान लागू होता है। (वर्तमान स्पेक को मानते हुए और जब तक कोई विशेष समय फ़ंक्शन का उपयोग नहीं किया जाता है।) दृश्यता पर संक्रमण/एनिमेशन धीरे-धीरे दृश्य प्रभाव नहीं दिखाते हैं, हालांकि जैसा कि मैंने प्रश्न पढ़ा है कि विचार वास्तव में तत्व छुपा रखने के लिए है 5 वें सेकंड तक।

आपका सीएसएस एनीमेशन बदल दिखाई को छिपे हुए से जो ऊपर शासन करने के लिए अनुसार तत्व से पता चलता है और फिर आप दिखाई से 100% से 50% से संक्रमण निर्दिष्ट 0% से 50% से पहले संक्रमण को निर्दिष्ट करने के लिए छिपा हुआ , जो खेलते समय तत्व भी दिखाता है। तो यह तत्व स्थायी रूप से दिखाई देता है।

@keyframes toggle { 
     from { 
      visibility:hidden; 
     } 
    50% { 
      visibility:hidden; 
     } 
    to { 
      visibility:visible; 
     } 
}

को निर्दिष्ट तत्व 50% तक छिपा रहना होगा और फिर अचानक दिखाई करके। अंत में इसे छिपाने के लिए, आपको दृश्यता जोड़ने की आवश्यकता है: पर छिपा हुआ मुख्य स्टाइल शीट नियम कुंजीफ्रेम पर नहीं है। इसके अलावा प्रति http://www.w3.org/TR/css3-transitions/#animatable-properties- दृश्यता एक animatable संपत्ति है सीएसएस संक्रमण दृश्यता http://www.taccgl.org/blog/css-transition-visibility.html#Appearance_CSS_Visibility

स्रोत

2014-08-06 12:13:40

यह उत्तर सही है, नीचे दिए गए नहीं। –

इसे उत्तर के रूप में चिह्नित किया जाना चाहिए –

सीएसएस दृश्यता एनिमेशन काम नहीं कर रहा

उत्तर

संबंधित मुद्दे