CSS3 Now-アニメーション、透明度など（パート2）

一連の記事「CSS3 Now！」（ 最初の記事はCSS Transitions ）を続けて 、CSS3を使用したアニメーション、特に@keyframeとanimateについてお話したいと思います。 また、この記事では、 不透明度のプロパティとrgba（）カラーモデル、ブラウザ間でのborder-radius 、 box-shadowおよびgradientsの使用についても触れます。

キーフレーム

現在、このようなアニメーションのサポートは、WebKitベースのブラウザー（ChromeおよびSafari）のみに存在します。 しかし、このトピックは非常に興味深いので、検討する価値があります。結局のところ、近い将来、他のブラウザーもChromeに追いつくでしょう。



CSSアニメーションを作成する最初のポイントは、キーフレーム（キーフレーム）の作成です。 一般に、キーフレームは、アニメーション全体に適用される一連のルールです。 キーフレームと関数を大まかに比較できます。最初にキーフレームを宣言してから、CSSの任意の場所でこのアニメーションを呼び出します。



簡単なアニメーションの例を作成しましょう-ボールの上にカーソルを合わせると、ボールがジャンプし始めます。

ボール：

#ball { width: 60px; height: 60px; border-radius: 30px; background: #f00; position: absolute; bottom: 0; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、キーフレームを作成します。

 @-webkit-keyframes bounce { 0% { bottom: 0; } 50% { bottom: 100px; } 100% { bottom: 0; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まず、アニメーションの名前を設定します。この例では、「バウンス」になります。 次に、アニメーションのキーフレームについて説明します。

0% { bottom: 0; }



0% { bottom: 0; }



-開始時、ボールは開始位置にあります。

50% { bottom: 100px; }



50% { bottom: 100px; }



-アニメーションの途中で、ボールは最大の高さに達します。

100% { bottom: 0; }



100% { bottom: 0; }



-アニメーションの最後に、ボールは元の場所に落ちます。



アニメーションを作成します。

 #ball:hover { -webkit-animation: bounce 1s infinite ease; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードを使用すると、ボールにカーソルを合わせたときにアニメーションが設定されます。 順序は次のとおりです： < keyframe> < > < > < >



。



できた ！ 私たちのボールはパンのようにジャンプしています！ 次に、この例を見てください。 ボックスシャドウとキーフレームの組み合わせにより、すばらしい形状強調効果が強調されます。 たとえば、フォームをチェックしてエラーのあるフィールドを強調表示する場合に使用できます。

パルス形状コード：

 @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.2); } 50% { -webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.9); } 100% { -webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.2); } } form input[type="text"]:focus { -webkit-animation: pulse 1.5s infinite ease-in-out; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

約束されたrgba（）はコードに表示されます。 多くの人がすでに認識しているように、これはRGBカラーモデル+アルファチャネルであり、必要に応じて透明度を設定できます。

不透明度

しかし、このプロパティはすでに最大限に活用することができます-最愛の人を除いて、すべてのブラウザで動作します。 確かに、IEには次の修正があります。

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);





半透明のクロスブラウザボタンの例を次に示します。

 .foo { opacity: 0.5; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

まだ知らない人のために-素晴らしいCSS3Pieがあります-それは今、丸い角、影、グラデーション、そして絶対にクロスブラウザを使用することを可能にします：IE 6-8、Chrome、Safari、Mozilla、Opera！ これらすべてのプロパティをブラウザ間で使用する例：

 border: 1px solid #696; padding: 60px 0; text-align: center; width: 200px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: #666 0px 2px 3px; -moz-box-shadow: #666 0px 2px 3px; box-shadow: #666 0px 2px 3px; background: #EEFF99; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33)); background: -moz-linear-gradient(#EEFF99, #66EE33); background: linear-gradient(#EEFF99, #66EE33); -pie-background: linear-gradient(#EEFF99, #66EE33); behavior: url(/PIE.htc);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

テストページ： ボール 、 形状 、 クロスブラウザのプロパティ 。



ご清聴ありがとうございました。レイアウトをお楽しみください！