CSS 3 Keyframesプレイ

先周、CSS 3によるページアニメーションの制作を学び、ページアニメーションのダウンロード开発を完了しました.

はじめに

は、必要に応じて「フェードFadeIn」の効果を実現します.最も簡単な場合、transitionを使用すると効果が得られます.

transition: opacity 500ms;
opacity: 0;/*    opacity      1      */

しかし、少し面倒な場合は、要素にclassの新しいスタイルを挿入しても、要素のstyleを直接修正しても構いません.opacity = 1;,JavaScriptで制御する必要があります.実際にCSSは独立して完成することができ、JSを借りる必要はありません.CSS 3はkeyframeルール制御を「時間軸」を制御手段とするアニメーションメカニズムを提供し、従来のFlash時間軸とキーフレームの概念に少し似ている.
keyframeでグラデーションを実装する場合は、まずkeyframesの名前とfromの開始状態と終了状態toを定義し、それぞれ0と1に透明に設定します.

@-webkit-keyframes fadeIn{
    from {opacity:0;}
    to {opacity:1;}
}

次に、特定の要素にキーフレーム名を指定すると、効果が適用されます.

-webkit-animation-name: fadeIn;

アニメーションはデフォルトでは自動的に実行されますが、以下の設定で実行を遅らせることができます.

-webkit-animation-delay: 3s;
-webkit-animation-duration:.5s; //       ;

は、通常、より豊富なその他のオプションを伴う.

-webkit-animation-iteration-count: 1; //     ，   1，   infinite      
-webkit-animation-direction: alternate; //     
-webkit-animation-fill-mode: forwards; //             ，   forwards      

前にアニメーションの自動実行について説明しましたが、自動実行を行わない場合は、-webkit-animation-play-state:pausedを設定して一時停止し、runningに変更してアニメーションの実行を開始します(通常、このステップはJSによってトリガーされます).

el.style.webkitAnimationPlayState = "running";

特筆すべきは、keyframesがdisplay:none/blockの要素に対して自動的に効果を実施することであり、このようなシーンの切り替えの際には、開発者がこの論理を追加的に符号化する必要はありません.

キーフレームの定義

Flashのように、CSS 3にもキーフレームの概念があります.例は次のとおりです.

@-webkit-keyframes fadeInRight { 
  0% { opacity: 0; -webkit-transform: translateX(0%); }
  100% { opacity: 1; -webkit-transform: translateX(-108%); }
}
@-moz-keyframes fadeInRight { 
  0% { opacity: 0; -moz-transform: translateX(20px); }
  100% { opacity: 1; -moz-transform: translateX(0px); }
}
@-o-keyframes fadeInRight { 
  0% { opacity: 0; -o-transform: translateX(20px); }
  100% { opacity: 1; -o-transform: translateX(0px); }
}
@keyframes fadeInRight { 
  0% { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0px); }
}

.fadeInRight{
	-webkit-animation-name:fadeInRight;
	-moz-animation-name:fadeInRight;
	-o-animation-name:fadeInRight;
	animation-name:fadeInRight;
}

CSSライブラリの利用

実は今多くの眩しいH 5ページを見て、すべてCSSライブラリで急速に開発したので、自分でFirebugで1つのスタイルをコピーするのは疲れるのではないでしょうか.Animate.cssは流行のライブラリですが、直接引用すると冗長なCSSがあるので、LESSを思い出しました.js.やはり誰かが統合したcssはLESSに着いたので、これでずっと便利になりました.しかも中国人の作品で、詳しくはここを参照してください.(ここでもっと直感的な例がありますので、クリックしてください)
使用方法、mixinスタイル、定義.アニメーションに関するパラメータ(本明細書で説明する).

.box{
  .bounceIn(); //                
  .animation(bounceIn 1s linear infinite);
}