CSS3 now-移行

CSS3とHTML5はますます高速に開発されており、ブラウザはますます多くの新しいチップとバンをサポートし始めています。 この点で、私は私たちの将来のメイクアップの楽園を調べ、これらのテクノロジーの新しいグッズとチップに関する一連のレビュー記事を作成したいと思います。

このシリーズでは、 transition 、 animate 、 opacity、 rgba（）モデルなどのCSS3機能を検討したいと思います。

CSS3を使用します。

多くの場合、多くのWebデザイナーから「CSS3を使用できるようになるまで待てない」という言葉を聞くことができます。 その間、今日それを使用できます。 はい、CSS3をサイトの重要な瞬間に使用することは現在不可能です。 しかし、これを使用してプロジェクトに重要ではない小さな詳細を追加することは、非常に現実的であり、必要であり、必要です。





例：サイトで、マウスオーバーするとメニューのリンクの色が変わります。 色は滑らかに変化せずに劇的に変化しますが、これはサイトの全体的な外観、使いやすさには影響しません。 しかし、色の滑らかな移行の存在は、あなたのサイトに少しの「生命」を追加するまさにその細部を正確に提供することができます。



この記事では、CSS transitionプロパティを見ていきます。

すべての例は、Webkitエンジン用に提供されています。 以下では、これらのメソッドのブラウザ間の互換性について検討します。

移行

W3Cは、次の遷移の定義を提供します。

CSSトランジションにより、CSS値のプロパティを変更できます

指定された期間にわたってスムーズに。



CSSトランジションを使用すると、CSSプロパティの変更をスムーズに時間をかけて割り当てることができます。

最も単純な例から始めましょう-リンク背景の滑らかな遷移を追加します。

従来の実装：

a.foo { padding: 5px 10px; background: #69f; color: #000; } a.foo:hover { background: #33f; color: #fff; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

マウスをリンクの上に置くと、背景の色が明るい青から濃い青に変わり、フォントの色が黒から白に変わります。 通常の状況。

CSSトランジションを使用して、スムーズな背景の変更を追加します。

 a.foo { padding: 5px 10px; background: #69f; color: #000; -webkit-transition-property: background; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease; } a.foo:hover { background: #33f; color: #fff; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、背景の色が0.5秒間スムーズに変わりました！ 他のCSSプロパティと同様に、すべての遷移プロパティを1つにまとめることができます。

 a.foo { padding: 5px 10px; background: #69f; color: #000; -webkit-transition: background 0.5s ease; } a.foo:hover { background: #33f; color: #fff; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、スムーズなフォントの色の変更を追加します。

 a.foo { padding: 5px 10px; background: #69f; color: #000; -webkit-transition: background 0.5s ease, color 0.3s ease; } a.foo:hover { background: #33f; color: #fff; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このホバーコードは、背景色を0.5秒間、フォント色を0.3秒間スムーズに変更します。 すべての要素に同じプロパティが必要な場合は、置き換えることができます

 -webkit-transition: background 0.5s ease; -webkit-transition: color 0.3s ease;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

に

 -webkit-transition: all 0.5s ease;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、トランジション効果は、イベントと同じパラメーター（0.5秒、イージー効果）で変化するすべてのプロパティに適用されます。



また、エフェクトに遅延を追加できます。

 a.foo { padding: 5px 10px; background: #69f; color: #000; -webkit-transition: all 0.5s ease; -webkit-transition-delay: 0.5s; } a.foo:hover { background: #33f; color: #fff; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、マウスにカーソルを合わせてから半秒後にアニメーションが機能します。



遷移プロパティは、背景、色、長さ、フォントサイズなど、あらゆるものに適用できます。 基本的に、これらは長さの単位（px、em、ex）またはパーセントで表現できる色またはプロパティを指定するプロパティです。 イベントとして、擬似クラス：focusおよび：activeも使用できます。 一般的に-任意のセレクターでトランジションを使用できます。



サマリーピボットテーブル：

遷移プロパティ	アニメーションを適用するプロパティ	ほとんどすべてのCSSプロパティ：色、背景、幅、フォントサイズなど
移行期間	アニメーション期間	秒単位の時間：0.5秒-0.5秒、60秒-1分など
遷移タイミング関数	アニメーションに使用される一時的な関数	イーズ、リニア、イーズインアウト、イーズイン、イーズアウト、キュービックベジェ
遷移遅延	アニメーションの遅延	秒単位の時間：0.5秒-0.5秒、60秒-1分など

ブラウザ

Chrome、Safari、Opera 10.5以降、Firefox 4以降

記事のテキストでは、WebKitブラウザーのみに接頭辞を付けたルールを使用しました。 ベンダープレフィックス-moz-および-o-を忘れずにプロジェクトに追加してください。 サンプルページでは、クロスブラウザコードを覗くことができます（もちろんIEなし）。



記事で興味のある読者が見つかった場合、次の投稿でキーフレームアニメーション、opacityプロパティ、およびrgba（）モデルについて検討します。 ご清聴ありがとうございました！



PSコメントの修正についてlahmatiyに感謝します。