まだJSでアニメを書いてるの?それではあなたはウルトラになりました~~純粋なCSSは元素の回転を実現して拡大します
本文は現在Chrome、Opera、Safariにのみ適用されている.
原文とdemo:http://www.jsmix.com/css/approach-to-css3-animation.html
効果:マウスを1つの要素に移動し、要素を2秒で720度回転させ、元のサイズの1.5倍に拡大します.
この効果を達成するには、非常に簡単な3つのステップしか必要ありません.まず、回転する要素を作成します.
次に、ブラウザがさっき追加した要素に、その属性を使用してアニメーションを実行し、アニメーションの実行時間とモーションの関数を設定する必要があることを伝える必要があります.ここではCSS 3の新しい属性:transitionを使用します.次のコードが霧に包まれる心配はありません.続いてtransition属性について詳しく説明します.
width、height、backgroundはもう何も紹介する必要はありません.transitionの各種接頭辞は異なるブラウザのプライベート属性を互換化するためであることはCSS 3について少し知っている人も知っていると思います.ここで注目すべきは、これまでFirefoxの最新バージョン(3.6)はtransitionのサポートを提供していなかったが、MozillaはGecko 1.9.3(firefox 4)にこの属性を導入すると主張していたため、コードの継続性を向上させるために-mozのプライベート属性を追加した.
上のtransitionは簡潔で、最初の属性値allは実際にtransition-propertyの属性値で、ブラウザにどの属性をアニメーション化するかを教えてくれると言っています.たとえばtransition-property:left,transition-property:opacity,widthでは、前者は属性leftに対してアニメーションを実行することを示し、後者はopacityとwidth属性に対してアニメーションを同時に実行することを示し、はい、複数の属性の間に半角カンマで区切られています.ここで設定したallは、いずれかのプロパティを操作する可能性があることを示しています.これはサボる方法です.
2番目のアトリビュート値2 sは、アニメーションが実行される時間、すなわち要素が古いアトリビュートから新しいアトリビュートに変換されるまでの秒数を表す簡単です.この値が0の場合、アニメーションは実行時にすぐに終了します.この属性値の単位はs(秒)でもms(ミリ秒)でもよい.もちろん、上のコードは同様に略記を使用しており、完全な書き方はtransition-duration:2 sです.既定値は0です.
3番目の属性値ease-in-outは、アニメーション実行において「ease-in-out」という効果を用いることを簡単に理解することができ、これは実際に要素がアニメーション中にどのような関数を用いて動きの計算を行うかを決定し、通常は緩動関数と呼ばれる.大まかに「ease|linear|ease-in|ease-out|ease-in-out」という所定値があります.デフォルトはeaseです.この属性の完全な書き方はtransition-timing-function:ease-in-out;
私たちのdemoではこの3つの属性を使用していますが、実際にはtransitionにはもう1つの属性値があります:transition-delay、その属性値はtransition-durationと全く同じで、唯一の違いは、アニメーションの遅延時間を表しています.これはよく理解されています.指定された時間に基づいてアニメーションの実行を遅延します.
最後のステップを行う前に、transition属性は、上述した4つのtransition-X属性の略記にすぎず、その略記規則は[<<<<]であることを再確認する必要がある.この点は決して混同してはいけない.また、transitionの内容W 3 Cについて詳しく知りたい場合は、非常に詳細なドキュメントを提供します.
demoで見たように、最後のステップでは要素にhoverスタイルを追加する必要があります.ここではtransformプロパティを使用します.
transitionプロパティに比べて、transformは要素を変形することを示しています.rotate(720 deg)は要素を720度回転変形することを表し、括弧の中の数字は回転の角度値であり、単位deg、scaleは要素をスケーリングする機能であり、括弧の中のパラメータはスケーリングの倍数を表し、単位を必要としない.実際にtransformはここで述べたよりはるかに強く、様々な変形を実現することができ、W 3 Cのドキュメントでは非常に詳細に紹介されています.
これまで、上のdemoのような効果を実現したはずです.実際には、transitionによって要素をmouseoverイベントでリスニングし、最初のすべての(all)属性の値を記録し、要素のmouseoverイベントがトリガーされたときに要素のターゲット属性の値を見つけ、アニメーションを実行するプロセス全体が一時的に理解できます.こんなに簡単です.なお、要素がアニメーション状態である場合、要素に文字が含まれている場合、文字はオプションであり、SVGやCanvasでは達成できない効果である.
本当に国外のウェブサイトのように、局所的な差別化の開発を通じて、css 3に徐々に移行し、firefox、chromeなどの先進的なブラウザにも移行したいと思っています.
原文とdemo:http://www.jsmix.com/css/approach-to-css3-animation.html
効果:マウスを1つの要素に移動し、要素を2秒で720度回転させ、元のサイズの1.5倍に拡大します.
この効果を達成するには、非常に簡単な3つのステップしか必要ありません.まず、回転する要素を作成します.
<div id="css_animation">CSS 3</div>次に、ブラウザがさっき追加した要素に、その属性を使用してアニメーションを実行し、アニメーションの実行時間とモーションの関数を設定する必要があることを伝える必要があります.ここではCSS 3の新しい属性:transitionを使用します.次のコードが霧に包まれる心配はありません.続いてtransition属性について詳しく説明します.
#css_animation{
width: 100px;
height: 100px;
background: purple;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
width、height、backgroundはもう何も紹介する必要はありません.transitionの各種接頭辞は異なるブラウザのプライベート属性を互換化するためであることはCSS 3について少し知っている人も知っていると思います.ここで注目すべきは、これまでFirefoxの最新バージョン(3.6)はtransitionのサポートを提供していなかったが、MozillaはGecko 1.9.3(firefox 4)にこの属性を導入すると主張していたため、コードの継続性を向上させるために-mozのプライベート属性を追加した.
上のtransitionは簡潔で、最初の属性値allは実際にtransition-propertyの属性値で、ブラウザにどの属性をアニメーション化するかを教えてくれると言っています.たとえばtransition-property:left,transition-property:opacity,widthでは、前者は属性leftに対してアニメーションを実行することを示し、後者はopacityとwidth属性に対してアニメーションを同時に実行することを示し、はい、複数の属性の間に半角カンマで区切られています.ここで設定したallは、いずれかのプロパティを操作する可能性があることを示しています.これはサボる方法です.
2番目のアトリビュート値2 sは、アニメーションが実行される時間、すなわち要素が古いアトリビュートから新しいアトリビュートに変換されるまでの秒数を表す簡単です.この値が0の場合、アニメーションは実行時にすぐに終了します.この属性値の単位はs(秒)でもms(ミリ秒)でもよい.もちろん、上のコードは同様に略記を使用しており、完全な書き方はtransition-duration:2 sです.既定値は0です.
3番目の属性値ease-in-outは、アニメーション実行において「ease-in-out」という効果を用いることを簡単に理解することができ、これは実際に要素がアニメーション中にどのような関数を用いて動きの計算を行うかを決定し、通常は緩動関数と呼ばれる.大まかに「ease|linear|ease-in|ease-out|ease-in-out」という所定値があります.デフォルトはeaseです.この属性の完全な書き方はtransition-timing-function:ease-in-out;
私たちのdemoではこの3つの属性を使用していますが、実際にはtransitionにはもう1つの属性値があります:transition-delay、その属性値はtransition-durationと全く同じで、唯一の違いは、アニメーションの遅延時間を表しています.これはよく理解されています.指定された時間に基づいてアニメーションの実行を遅延します.
最後のステップを行う前に、transition属性は、上述した4つのtransition-X属性の略記にすぎず、その略記規則は[<
demoで見たように、最後のステップでは要素にhoverスタイルを追加する必要があります.ここではtransformプロパティを使用します.
#css_animation:hover {
-webkit-transform: rotate(720deg) scale(1.5);
-moz-transform: rotate(720deg) scale(1.5);
-o-transform: rotate(720deg) scale(1.5);
transform: rotate(720deg) scale(1.5);
}
transitionプロパティに比べて、transformは要素を変形することを示しています.rotate(720 deg)は要素を720度回転変形することを表し、括弧の中の数字は回転の角度値であり、単位deg、scaleは要素をスケーリングする機能であり、括弧の中のパラメータはスケーリングの倍数を表し、単位を必要としない.実際にtransformはここで述べたよりはるかに強く、様々な変形を実現することができ、W 3 Cのドキュメントでは非常に詳細に紹介されています.
これまで、上のdemoのような効果を実現したはずです.実際には、transitionによって要素をmouseoverイベントでリスニングし、最初のすべての(all)属性の値を記録し、要素のmouseoverイベントがトリガーされたときに要素のターゲット属性の値を見つけ、アニメーションを実行するプロセス全体が一時的に理解できます.こんなに簡単です.なお、要素がアニメーション状態である場合、要素に文字が含まれている場合、文字はオプションであり、SVGやCanvasでは達成できない効果である.
本当に国外のウェブサイトのように、局所的な差別化の開発を通じて、css 3に徐々に移行し、firefox、chromeなどの先進的なブラウザにも移行したいと思っています.