CSS可見性動畫不工作

我想對可見性CSS屬性執行基於關鍵幀的動畫。我最初在'display'上試過，但發現'display'上的動畫不支持，但'visibility'是。這個想法是讓矩形的可視性保持切換。我不想使用jquery，並希望在CSS中實現它。以下是我的代碼，但它並沒有給矩形的預期效果剩餘隱藏，直到第5秒，出現，然後再在動畫結束CSS可見性動畫不工作

<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://www.w3.org/TR/css3-transitions/#animatable-properties- visibility是一個動畫屬性。即使Safari文檔提到可見性可以是動畫http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transitions/Transitions.html#//apple_ref/doc/uid/TP40008032-CH4 -SW1。我甚至在2009年看到了一個針對Mozilla的BUG修復程序，它修復了關於可見性 – Raks

可見性的動畫，對。但不要創造視覺效果。你必須用「真實」動畫屬性來使用它。何時以及如何將可見性用作動畫屬性，可以參閱@ http://www.greywyvern.com/?post=337 –

上的知名度屬性的CSS過渡或動畫保持可見的元素過渡的時間，然後突然應用新值。（假設目前的規範，只要沒有使用特殊的定時功能）視覺上的轉換/動畫不會顯示逐漸變化的視覺效果，但是當我讀到這個問題的確是以保持元素隱藏直到第5秒。

你的CSS動畫指定爲隱藏從0％至50％轉動從隱藏到可見示出了根據上述規則中的元素，然後從50％從可見指定 100％的轉變的第一過渡，這也顯示了元素在玩。所以永久可見的元素。

通過指定

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

元件將保持隱藏，直到50％，然後突然出現。要最終隱藏它，您需要添加可見性：隱藏到主要樣式表規則而不是關鍵幀。另請參閱我的博客帖子關於CSS轉換可見性 http://www.taccgl.org/blog/css-transition-visibility.html#Appearance_CSS_Visibility

來源

2014-08-06 12:13:40

此答案正確，不是下面的答案。 –

這應該被標記爲答案 –

CSS可見性動畫不工作

回答

相關問題