CSS Görünürlük Animasyon Çalışmıyor

Görünürlük CSS özelliğinde bir anahtar kare tabanlı animasyon yapmak istiyorum. İlk başta 'display'de denedim ama' display 'üzerindeki animasyonun desteklenmediğini, ancak' görünürlük 'olduğunu buldum. Fikir, dikdörtgenin görünürlüğünü değiştirmeye devam etmektir. JQuery kullanmak istemiyorum ve tüm bunları CSS'de uygulamak istiyorum. Aşağıdaki kodum ama animasyonun sonunaCSS Görünürlük Animasyon Çalışmıyor

<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>

kaynak

2011-10-22 Raks

Görünürlük de kaybolan tekrar o görünen ve, 5 saniyeye kadar gizli kalan dikdörtgenin beklenen sonucu verir (ve ekran gelmez) özellik animasyonlu olamaz. Bir öğe ya görünür ya da değil. Bunun yerine opacity özelliği deneyin:

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

    50% { 
     opacity:1; 
    } 

    to { 
     opacity:0; 
    } 
}

kaynak

2011-10-22 07:26:48 JJJ

benim blog yazısı bkz. Safari dokümantasyonu bile görünebilirliğin animasyonlu olabileceğinden bahseder http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transitions/Transitions.html#//apple_ref/doc/uid/TP40008032-CH4 -SW1. Hatta 2009 yılında Mozilla için bir HATA düzeltmesi gördü, bu animasyon görünürlüğü düzeltiyor – Raks

görünürlük animasyonlu olabilir, doğru. Ancak görsel bir etki yaratmak için değil. Bunu, "doğru" animasyonu olan özellikleriyle kullanmanız gerekir. Görünürlüğü bir animasyon özelliği olarak ne zaman ve nasıl kullanacağınızı görmek için @ http://www.greywyvern.com/?post=337 –

görüş özelliği CSS geçiş veya animasyon geçiş süresi görebilir elemanı tutar ve daha sonra aniden yeni değeri geçerlidir. (geçerli spesifikasyonun olduğu varsayılarak ve özel bir zamanlama fonksiyonu kullanılmadığı sürece.) Geçişler/Animasyonlar görünürlükte kademeli olarak görsel efektini göstermiyor, ancak soruyu okuduğumda gerçekten öğesini gizli tutmak için 5. saniyeye kadar. gizli için

CSS'niz animasyon% 0 Yukarıdaki kurala göre elemanını gösteren görünür gizli dönerek ve sonra görünür gelen % 100 50 den% geçişi belirtmek % 50 arasında bir ilk geçişi belirtir Ayrıca, oynatırken öğeyi de gösterir. Yani kalıcı olarak görünür öğe. % 50 kadar gizli kalacak

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

elemanı belirterek ve sonra aniden görünür By

. Sonunda gizlemek için, görünürlük eklemeniz gerekir: ana karenin kurallarına değil ana stil sayfası kuralına . Ayrıca görünürlüğü canlandırılabilir özelliktir http://www.w3.org/TR/css3-transitions/#animatable-properties- gereğince CSS geçiş görünürlüğü http://www.taccgl.org/blog/css-transition-visibility.html#Appearance_CSS_Visibility

kaynak

2014-08-06 12:13:40

'a bakabilirsiniz. Bu cevap doğru değil, aşağıdaki gibi. –

Bu cevap olarak işaretlenmelidir –

CSS Görünürlük Animasyon Çalışmıyor

cevap

İlgili konular