ホームページ > 記事 > ウェブフロントエンド > CSS3アニメーション_html/css_WEB-ITnose
CSS3アニメーション_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:35:141130ブラウズ
概要
CSS3 を使用すると、アニメーションを作成でき、多くの Web ページのアニメーション画像、Flash アニメーション、JavaScript を置き換えることができます。
CSS3 なので、もちろん古いバージョンのブラウザでは完全に表示できない場合があります。申し訳ありません。
ちょっとしたスキルのテスト何かを学ぶには、学習を続ける動機を得るために一定の達成感が必要です。今はあまり心配しないで、まずアニメーションを動かしてみましょう。
<!DOCTYPE html><html><head><style> @keyframes myfirst { from {background:red;} to {background:yellow;} } /* Firefox */ @-moz-keyframes myfirst { from {background:red;} to {background:yellow;} } /* Safari and Chrome */ @-webkit-keyframes myfirst { from {background:red;} to {background:yellow;} } /* Opera */ @-o-keyframes myfirst { from {background:red;} to {background:yellow;} } div { width:100px; height:100px; margin: 50px auto; background:red; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ }</style></head><body><div></div></body></html> とてもシンプルでカッコイイと思いませんか？
CSS3 アニメーションを実装するには、少なくとも次の条件が必要です:
@keyframes を使用してアニメーションを作成し、名前を付けます
アニメーションの短縮形属性またはその他の特定の属性を使用してアニメーションを呼び出し、アニメーションの継続時間を設定します
アニメーションをバインドするto 特定のセレクター上
以下に、関連する各属性を詳しく紹介します。
アニメーション @keyframes を作成する@keyframes ルールを使用して、アニメーションを作成できます。
アニメーション作成の原則は、ある CSS スタイルのセットを別のスタイルのセットに徐々に変更することです。
この CSS スタイルのセットは、アニメーション プロセス中に複数回変更できます。
変化が発生する時間をパーセントで指定するか、キーワード from と to を使用して変化が発生する時間を指定します。
0% はアニメーションの開始時間、100% はアニメーションの終了時間です。
ブラウザーを最適にサポートするには、常に 0% および 100% セレクターを定義する必要があります。
@keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;}}/* Firefox */@-moz-keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;}}/* Safari 和 Chrome */@-webkit-keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;}}/* Opera */@-o-keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;}} アニメーションを呼び出します アニメーション 上では @keyframes を使用してアニメーションを作成し、次にアニメーションを呼び出します。
前述したように、アニメーションを呼び出す最も基本的なものは、アニメーションの名前とアニメーションに費やされた時間です。以下では、アニメーション呼び出しに関連する属性を詳しく紹介します。
アニメーション名
呼び出すアニメーションを指定します。
animation-name: keyframename | none;
none はアニメーション効果を指定しません (カスケードからのアニメーションをオーバーライドするために使用できます)。
キーフレーム名の命名は次のルールに従います:
名前には文字、数字、_ または - を使用できます。大文字と小文字が区別されます。文字または単一の - でのみ開始できます。また、なし、未設定、イニシャル、および継承キーワードは使用できません。
animation-duration
animation-duration プロパティは、アニメーションの 1 サイクルが完了するのにかかる時間を秒またはミリ秒で定義します。
animation-duration: 2s; /*等价于 2000ms*/
animation-timing-function
animation-timing-function はアニメーションのスピードカーブを指定します。
animation-timing-function: value;
この属性値は、3 次ベジェ関数と呼ばれる数学関数を使用して速度曲線を生成します。
次の値が利用可能です:
| Value | Description |
|---|---|
| linear | アニメーションの速度は最初から最後まで同じです。 |
| 簡単 | デフォルト。アニメーションは遅い速度で始まり、その後速度が上がり、最後に遅くなります。 |
| イーズイン | アニメーションは低速で始まります。 |
| ease-out | アニメーションは低速で終了します。 |
| イーズインアウト | アニメーションは低速で開始および終了します。 |
| cubic-bezier(n, n, n, n) | cubic-bezier 関数内の独自の値。取り得る値は0から1までの数値です。 |
5 つの事前定義されたキーワードに対応するベッセル関数は次のとおりです:
linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)ease-out: cubic-bezier(0, 0, 0.58, 1.0)ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)
5 つの速度曲線の効果を簡単に体験してください:
速度に対するさまざまな値の影響を個人的に体験したい場合は、ここに移動してください ここ: ベジェ速度曲線
animation-delay
animation-delay プロパティは、アニメーションがいつ開始されるかを定義します。
animation-delay: time;
秒またはミリ秒単位の値。負の値は許可されます。-2s を指定すると、アニメーションがすぐに開始されますが、アニメーションが 2 秒スキップされます。
animation-iteration-count
animation-iteration-count 属性は、アニメーションが再生される回数を定義します。
animation-iteration-count: n | infinite;
n は特定の回数を表し、デフォルトは 1 で、infinite は無制限の再生を指定します。
animation-direction
animation-direction プロパティは、アニメーションを順番に逆方向に再生するかどうかを定義します。
animation-direction: normal | reverse | alternate | alternate-reverse;
2 つのキーワードはオプションです。normal はアニメーションが通常どおりに再生されることを意味し、デフォルト値は 0% -> 100% で、次に 0% -> 100% は通常の逆です。 ; 0% 次に 100% -> 0% は、0% -> 0%、次に 0% -> の順に再生することを意味します。 . alter-reverse は、 alter の逆です。
animation-play-state
animation-play-state プロパティは、アニメーションが実行中か一時停止かを指定します。
animation-play-state: paused | running;
paused は、アニメーションが一時停止され、アニメーションが動かないことを意味します。デフォルトでは、running はアニメーションが動いていることを意味します。
アニメーション
この属性は、上記の 7 つの特定の属性の略称属性です。
概要これは CSS3 アニメーションについて簡単に理解したものです。将来、新しいコンテンツが追加される可能性があります。
参考文献CSS3 アニメーション
cubic-bezier ベジェ曲線 CSS3 アニメーション ツール
Cubic-Bezier
Mozilla アニメーション