CSS Visibilityアニメーションが動作しない

visibility CSSプロパティでキーフレームベースのアニメーションを行いたいとします。私は最初に 'display'で試しましたが、 'display'のアニメーションはサポートされていませんが、 'visibility'はサポートされていません。アイデアは、長方形の表示をトグルし続けることです。私はjqueryを使いたくないし、CSSでその全体を実装したいと思う。以下は、私のコードですが、それはアニメーションCSS Visibilityアニメーションが動作しない

<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プロパティを試してみてください：visibilityプロパティに

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

    50% { 
     opacity:1; 
    } 

    to { 
     opacity:0; 
    } 
}

出典

2011-10-22 07:26:48 JJJ

に私のブログの記事を参照してください。 Safariのドキュメントでさえ、可視性をアニメーション化することができると述べています。http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Transitions/Transitions.html#//apple_ref/doc/uid/TP40008032-CH4 -SW1。私は、可視性のアニメーションを修正する2009年のMozillaのバグ修正を見たこともあります。 – Raks

可視性はアニメーション化することができます。しかし、視覚効果を作り出すことはできません。あなたは "真の"アニメーション化可能なプロパティでそれを使用しなければなりません。アニメーションプロパティとして可視性を使用する方法と使用方法は、@ http://www.greywyvern.com/?post=337を参照してください。 –

CSSトランジションやアニメーション、トランジションの期間中、目に見える要素を保持し、その後、突然、新しい値を適用します。（現在の仕様と仮定し、特別なタイミング機能が使用されていない限り）可視性の遷移/アニメーションは徐々に変化するように表示されますが、私は質問を読むと実際には要素が非表示になるように考えています 5秒まで。隠さに

あなたのCSSアニメーションは、0％以上のルールにに従って要素を示す可視に隠れから旋回してから、可視から 50％から100％までの遷移を指定％〜50から第一の遷移を指定します、それはまた、の再生中に要素を示しています。それは永久に目に見える要素なのです。 50％まで隠されたままになります

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

要素を指定してから突然現れることで

。最後に非表示にするには、visibility：hiddenをに追加する必要があります。メインスタイルシートルールはキーフレームではありません。はまた、視認性がアニメーション可能な特性であるhttp://www.w3.org/TR/css3-transitions/#animatable-properties-を1としてCSSの遷移視界 http://www.taccgl.org/blog/css-transition-visibility.html#Appearance_CSS_Visibility

出典

2014-08-06 12:13:40

この回答は正しいものであり、以下のものではありません。 –

これは答えとしてマークする必要があります –

CSS Visibilityアニメーションが動作しない

答えて

関連する問題