CSSアニメーションアニメーションとtransition
4903 ワード
一、紛らわしい概念
cssには、似たようなアニメーションアトリビュートがいくつかあります.それぞれは
animation(アニメーション)、transition(遷移)、transform(変形)、translate(移動)
CSS 3のtransform(変形)属性は、インライン要素とブロックレベル要素に使用され、要素を回転、ねじれ、スケール、移動することができ、その属性値は以下の5つである:回転rotate、ねじれskew、スケールscale、および移動translate、およびマトリクス変形matrix;
transform(モーフ)はCSS 3の要素の属性であり、translate(移動)はtransformの属性値の1つにすぎない
animation(アニメーション)、transition(遷移)はcss 3の2つのアニメーション属性です.animationはプロセスと制御を強調し、要素の1つ以上の属性の変化を制御し、複数のキーフレーム(animationと@keyframesを組み合わせて使用することができる)を持つことができる.
Transitionは、エレメントの1つ以上のプロパティが変化したときに発生する遷移効果を強調します.同じエレメントは2つの異なるパスでスタイルを取得し、2つ目のパスは、ある変更が発生した(hoverなど)場合にスタイルを取得することができ、遷移アニメーションが生成されます.2つのキーフレームがあると考えられます.要素が何の操作もなくアニメーション化される場合、animationが一般的に使用されます.エレメントがアニメーションをトリガするイベントが必要な場合は、transitionが一般的に使用されます.
Transitionの例:
マウスをbox 1に移動すると、背景色が緑で赤くなり、180度回転して0.5倍に縮小します.
二、transition
1.構文
Transitionは複合属性で、4つの遷移属性を設定できます.略記は以下の通りです.
transition{ transition-property transition-duration transition-timing-function transition-delay}
transition-property:要素の1つの属性が変更されたときにtransition効果を実行することを指定します.値にはnone(属性変更なし)、all(デフォルト、すべての属性変更)、indent(属性名、transitionルールがあり、定義できる
1つの属性の変化は、複数の属性に関連するものではありません.複数の属性を設定する場合は、それぞれの設定をカンマで区切る必要があります)【その値がnoneの場合、transitionはすぐに実行を停止します.allを指定すると、要素に属性値の変化が発生するとtransition効果が実行されます.
果物.
Transition-duration:遷移時間は、s(秒)またはms(ミリ秒)の単位で要素変換プロセスを指定するための持続時間です.
Transition-timing-function:時間関数、時間の進行に応じて属性値の変換速度を変更できます.値ease(徐々に遅くなります)、linear(均一速度)、ease-in(加速)、ease-out(減速)、ease-in-out:(加速して減速)、cubic-bezier:(この値で時間曲線をカスタマイズできます)
transition-delay:遅延アニメーションの実行開始時間を指定します.すなわち、要素のプロパティ値を変更した後、s(秒)またはms(ミリ秒)の単位でtransition効果を実行する時間を指定します.
2.トリガ方式
擬似クラストリガ::hover:focus:checked:active
jsトリガ:toggleClass
3、以下の場合、属性値を変更しても遷移効果は発生しません background-image(url(a.jpg)からurl(b.jpg)(ブラウザサポートに関連し、サポートされていないブラウザもある)までの floatフローティング要素 heightまたはwidth auto値 を使用 displayプロパティnoneとその他の値(block、inline-block、inline)との間で 変換 positionはstativとabsoluteの間で を変換する.
三、animation
1.animationの例
上記のように、0%と100%はキーワードfromとtoを使用して表すこともでき、カッコで異なる期間のスタイルルールを設定することもできます.
上記の例では、animationでanimation-durationの値を10 sに設定し、animation-nameでchangeboxに@keyframes changeboxのスタイルを導入します.これは、10秒以内にアニメーションが実行されることを示します.アニメーションの実行手順:
0-1秒背景色が赤、0-5秒幅が80 px、0-7秒枠が元の設定の無からborder:15 px solid yellow、0-10秒高さが180 px、5-10秒幅が80 pxから180 px
特に、各パーセント番号の後のスタイルの変化は0 sから始まり、2つのパーセントが同じスタイルの変化を設定していない限り(上の例では50%{width:80 px; } 100%{width:150px;},では、幅の全体的な状況は0~5 sで幅が元の値から80 pxになる.5~10 sの間、幅は80 pxから180 pxに変わります
2、animation文法
キーフレームを設定すると、animationプロパティを設定できます.animationもプロパティに合致しています.簡単に書くことができます.文法は以下の通りです.
animation{ animation-name animation-duration animatino-timing-function animation-delay animation-iteration-count animation-direction animtion-play-state animation-fill-mode}
animation-name:@keyframes定義のアニメーションを呼び出すには、@keyframes定義のアニメーション名と一致します.
animation-duration:要素がアニメーションを再生する期間を指定します.
animatino-timing-function:transitionのtransition-timing-functionの値と同じです.上の@keframesで解析したanimationには複数の小さなアニメーションが存在する可能性があるので、ここでの値設定は、各小さなアニメーションが存在する時間範囲の属性変換レートです.
animation-delay:ブラウザがアニメーションを実行する前に待機する時間を定義します.ここでは、上述した複数の小さなアニメーションではなく、animationが実行される前の待機時間を指します.
animation-iteration-count:アニメーションの再生回数を定義します.通常は整数で、デフォルトは1です.値はinfiniteで、アニメーションは無限に再生されます.
animation-direction:主にアニメーションの再生方向を設定するために使用されます.主に2つの値があります.normalのデフォルト値がnormalに設定されている場合、アニメーションはループごとにalternate(順番に)を前方(つまり順番に)に再生し、アニメーションは偶数回目に前方に再生し、奇数回目に逆方向に再生します(animation-iteration-count値が1より大きい場合に有効)
animtion-play-state:プロパティは、要素アニメーションの再生状態を制御するために使用されます.主に2つの値があります.runningでは、この値で一時停止したアニメーションを再再生できます.ここでの再再生は、要素アニメーションの開始ではなく、一時停止した位置から再生されます.paused、再生を一時停止
アニメーション-fill-mod:デフォルトでは、アニメーションが終了すると要素のスタイルが開始状態に戻り、アニメーション-fill-modeプロパティでアニメーションが終了すると要素のスタイルが制御されます.主に4つの属性値があります.
none(既定では、アニメーションが開始されていない状態に戻ります.)forwards(アニメーション終了後、アニメーションは終了状態にとどまる)backwords(アニメーションは最初のフレームの状態に戻る)both(animation-directionに従ってforwardsとbackwardsルールを順番に適用する).
cssには、似たようなアニメーションアトリビュートがいくつかあります.それぞれは
animation(アニメーション)、transition(遷移)、transform(変形)、translate(移動)
CSS 3のtransform(変形)属性は、インライン要素とブロックレベル要素に使用され、要素を回転、ねじれ、スケール、移動することができ、その属性値は以下の5つである:回転rotate、ねじれskew、スケールscale、および移動translate、およびマトリクス変形matrix;
transform(モーフ)はCSS 3の要素の属性であり、translate(移動)はtransformの属性値の1つにすぎない
animation(アニメーション)、transition(遷移)はcss 3の2つのアニメーション属性です.animationはプロセスと制御を強調し、要素の1つ以上の属性の変化を制御し、複数のキーフレーム(animationと@keyframesを組み合わせて使用することができる)を持つことができる.
Transitionは、エレメントの1つ以上のプロパティが変化したときに発生する遷移効果を強調します.同じエレメントは2つの異なるパスでスタイルを取得し、2つ目のパスは、ある変更が発生した(hoverなど)場合にスタイルを取得することができ、遷移アニメーションが生成されます.2つのキーフレームがあると考えられます.要素が何の操作もなくアニメーション化される場合、animationが一般的に使用されます.エレメントがアニメーションをトリガするイベントが必要な場合は、transitionが一般的に使用されます.
Transitionの例:
10
11
12 BOX1
13 マウスをbox 1に移動すると、背景色が緑で赤くなり、180度回転して0.5倍に縮小します.
二、transition
1.構文
Transitionは複合属性で、4つの遷移属性を設定できます.略記は以下の通りです.
transition{ transition-property transition-duration transition-timing-function transition-delay}
transition-property:要素の1つの属性が変更されたときにtransition効果を実行することを指定します.値にはnone(属性変更なし)、all(デフォルト、すべての属性変更)、indent(属性名、transitionルールがあり、定義できる
1つの属性の変化は、複数の属性に関連するものではありません.複数の属性を設定する場合は、それぞれの設定をカンマで区切る必要があります)【その値がnoneの場合、transitionはすぐに実行を停止します.allを指定すると、要素に属性値の変化が発生するとtransition効果が実行されます.
果物.
Transition-duration:遷移時間は、s(秒)またはms(ミリ秒)の単位で要素変換プロセスを指定するための持続時間です.
Transition-timing-function:時間関数、時間の進行に応じて属性値の変換速度を変更できます.値ease(徐々に遅くなります)、linear(均一速度)、ease-in(加速)、ease-out(減速)、ease-in-out:(加速して減速)、cubic-bezier:(この値で時間曲線をカスタマイズできます)
transition-delay:遅延アニメーションの実行開始時間を指定します.すなわち、要素のプロパティ値を変更した後、s(秒)またはms(ミリ秒)の単位でtransition効果を実行する時間を指定します.
2.トリガ方式
擬似クラストリガ::hover:focus:checked:active
jsトリガ:toggleClass
3、以下の場合、属性値を変更しても遷移効果は発生しません
三、animation
1.animationの例
15
16
17
18 上記のように、0%と100%はキーワードfromとtoを使用して表すこともでき、カッコで異なる期間のスタイルルールを設定することもできます.
上記の例では、animationでanimation-durationの値を10 sに設定し、animation-nameでchangeboxに@keyframes changeboxのスタイルを導入します.これは、10秒以内にアニメーションが実行されることを示します.アニメーションの実行手順:
0-1秒背景色が赤、0-5秒幅が80 px、0-7秒枠が元の設定の無からborder:15 px solid yellow、0-10秒高さが180 px、5-10秒幅が80 pxから180 px
特に、各パーセント番号の後のスタイルの変化は0 sから始まり、2つのパーセントが同じスタイルの変化を設定していない限り(上の例では50%{width:80 px; } 100%{width:150px;},では、幅の全体的な状況は0~5 sで幅が元の値から80 pxになる.5~10 sの間、幅は80 pxから180 pxに変わります
2、animation文法
キーフレームを設定すると、animationプロパティを設定できます.animationもプロパティに合致しています.簡単に書くことができます.文法は以下の通りです.
animation{ animation-name animation-duration animatino-timing-function animation-delay animation-iteration-count animation-direction animtion-play-state animation-fill-mode}
animation-name:@keyframes定義のアニメーションを呼び出すには、@keyframes定義のアニメーション名と一致します.
animation-duration:要素がアニメーションを再生する期間を指定します.
animatino-timing-function:transitionのtransition-timing-functionの値と同じです.上の@keframesで解析したanimationには複数の小さなアニメーションが存在する可能性があるので、ここでの値設定は、各小さなアニメーションが存在する時間範囲の属性変換レートです.
animation-delay:ブラウザがアニメーションを実行する前に待機する時間を定義します.ここでは、上述した複数の小さなアニメーションではなく、animationが実行される前の待機時間を指します.
animation-iteration-count:アニメーションの再生回数を定義します.通常は整数で、デフォルトは1です.値はinfiniteで、アニメーションは無限に再生されます.
animation-direction:主にアニメーションの再生方向を設定するために使用されます.主に2つの値があります.normalのデフォルト値がnormalに設定されている場合、アニメーションはループごとにalternate(順番に)を前方(つまり順番に)に再生し、アニメーションは偶数回目に前方に再生し、奇数回目に逆方向に再生します(animation-iteration-count値が1より大きい場合に有効)
animtion-play-state:プロパティは、要素アニメーションの再生状態を制御するために使用されます.主に2つの値があります.runningでは、この値で一時停止したアニメーションを再再生できます.ここでの再再生は、要素アニメーションの開始ではなく、一時停止した位置から再生されます.paused、再生を一時停止
アニメーション-fill-mod:デフォルトでは、アニメーションが終了すると要素のスタイルが開始状態に戻り、アニメーション-fill-modeプロパティでアニメーションが終了すると要素のスタイルが制御されます.主に4つの属性値があります.
none(既定では、アニメーションが開始されていない状態に戻ります.)forwards(アニメーション終了後、アニメーションは終了状態にとどまる)backwords(アニメーションは最初のフレームの状態に戻る)both(animation-directionに従ってforwardsとbackwardsルールを順番に適用する).