【css3】画像で変形・遷移・アニメーションを学ぶ carousel_html/css_WEB-ITnose

元の投稿者は視覚的な楽しみを追求するのが好きですが、パフォーマンスや互換性を犠牲にすることがよくありますが、それでも楽しんでいます。この記事では、CSS3 の Transform、Transition、Animation を 1 つずつデモを通して簡単に理解します。

この記事は効果を達成する必要があります: (Chromeで開いてください)

Picture carousel

Picture自動カルーセル

Transform

私の理解によると、transformは、幅、高さ、背景など、すべてですdom の属性、違いは、相対的に css3 の下にあることです。元の dom 要素を移動、拡大縮小、回転、引き伸ばし、または引き伸ばすことができます。これは、キャンバス上の一部の API と同様なので、transform でいくつかのことができるようですjs. やるべきこと。

変換は 2D 変換と 3D 変換に分かれています。詳細については、CSS3 2D 変換 CSS3 3D 変換

をクリックしてください。検索を容易にするために、w3school のスクリーンショットをここに保存しました。

Transition

トランジションの説明は、CSS間の変換だと理解していますが、この変換はアニメーションと同様に非常に滑らかです。例えば、あるDOMのクラスは最初はclassAで、何らかの操作（クリックなど）を経てclassBになるというように、遷移がなければクラス間の変換は非常に高速で一瞬で完了します。ただし、移行すると、これは非常に穏やかでスムーズなプロセスになります。

トランジションの使い方をデモを使って説明します。

次の HTML ファイルを作成します:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css"></style>  <img src='http://hanzichi.github.io/img/img0.png' />

非常にシンプルな画像なので開き、CSS を追加します:

img {  -webkit-transition: all 1s ease-in-out 0s;}img:hover {  -webkit-transform:     rotate(360deg)    scale(0.5, 0.5);  opacity: 0;}

効果については、クリックしてください: トランジション変換 (

ps: すべてのデモは互換性がありません。開いてください) Chrome を使用すると

) とても簡単ですか?デモでは、元の属性とホバリング後の画像の属性（imgタグ）を設定するだけで、遷移処理はすべてtransitionで処理されます！リスナーが設定されているかのように、特定の要素の下にトランジションが追加されます (デモのトランジションは img タグの下に追加されます)。要素の属性値が変更されようとすると、トランジションに設定された属性が自動的に追加されます。一度一致するものが見つかった場合は、スムーズに移行されます。

Transition には 4 つのプロパティがあり、構文:

transition: property periodtiming-function

lay 4 つのプロパティは、前から後ろに向かって、「トランジション アニメーション変換のプロパティ」、「トランジション時間」、「移行処理速度変更」と「移行開始までの待機時間」（デフォルト値：すべて0、緩和0、最初の2つは必須で、最後の2つは省略可能）。 すべての属性をスムーズに移行する必要がない場合、または各属性の移行時間、速度、その他の設定に異なる要件がある場合、移行する属性をカンマで区切ることができます。デモは次のように記述できます。

img {  -webkit-transition:     -webkit-transform 1s ease-in-out 0s,    opacity 1s ease-in-out 1s;}img:hover {  -webkit-transform:     rotate(360deg)    scale(0.5, 0.5);  opacity: 0;}

Ifトランジションを設定する必要があります。 4 つの属性は次のように別々に記述されます:

img {  -webkit-transition-property: -webkit-transform, opacity;  -webkit-transition-duration: 1s;  -webkit-transition-timing-function: ease-in-out;  -webkit-transition-delay: 0s;}

私は最後の 3 つの属性をまとめて 1 つの値だけを書きました (値が同じであるため)、別々に記述することもできますプロパティのように、カンマで区切ります。

ここでは

timing-function

の値を紹介します。 6 つの主要な値: (静止画 w3cschool)

概要: 一般に、transition は dom のクラス変換で使用され、最初に機械的な変換を記述してから、トランジション効果を追加できます。

アニメーション

アニメーションの説明はトランジションの強化版であるアニメーションです。

トランジションで特定の js 効果を実現できる場合、アニメーションはより js に似たものになります。キャンバスの特殊効果を記述するのと同様に、特殊効果の合計時間など、いつ、どのような種類のシーンを表示するかを指定できます。各シーン間の変換は CSS3 自体が完全に担当し、キーフレームはjsメソッド。

主に、特定の要素で n 回の連続した CSS 変換が必要な場合に使用されます。簡単なデモは次のとおりです: アニメーション アニメーション

@keyframes でアニメーションを作成するときは、セレクターにバインドしてください。そうしないと、アニメーション効果が生成されません。

次の CSS3 アニメーション プロパティのうち少なくとも 2 つを指定することで、アニメーションをセレクターにバインドできます:

アニメーションの名前を指定します

アニメーションの継続時間を指定します

デモ コード:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">  img {    /*-webkit-animation: myfirst 5s;*/  }    @-webkit-keyframes myfirst  {    0% {      -webkit-transform:         rotate(0deg)        scale(1, 1);      opacity: 1;    }        50% {      -webkit-transform:         rotate(360deg)        scale(0.5, 0.5);      opacity: 0.5;    }        100% {      -webkit-transform:         rotate(0deg)        scale(1, 1)        translate(300px, 200px);      opacity: 1;    }  }  img {    -webkit-animation: myfirst 5s linear 0s 1 alternate;    /*停在结束位置*/    -webkit-animation-fill-mode: forwards;  }</style>  <img src='http://hanzichi.github.io/img/img0.png' />

Pleaseさらにクリック CSS3 アニメーション

特定のアプリケーション: 画像カルーセル

同様のアプリケーションでは、最初にトランジションなしでコードを記述し、次にクラス変換間にトランジションを追加できます。

デモ（自動画像カルーセル）とトランジションに関わるコアコードは数行のみで、jsは要素のクラスに値を代入するだけで、アニメーション処理はすべてcss3で完結します！

img {  position: absolute;  -webkit-transition: all 2s ease-out;}.disappear {  opacity: 0;}.show {  opacity: 1;}

imgクラスを表示から消える、または消えるから表示へ変換（imgタグ下のクラス変換）すると、トランジションで設定されたトランジションアニメーションが実行されます。

他のデモの実装も同様です。興味があればソースコードを参照してください: ソースコードをクリックしてください

まとめ

一般に、transformはdomにいくつかの属性を追加するだけで、transitionやアニメーションと組み合わせると、ある程度のアニメーション効果を実現できると思いますが、実際にはtransitionの方がよく使われており、擬似クラスやクリックイベントと併用することができます。 。

投稿者は上記のことを深く理解していません、もし齟齬があればご指摘ください。

さらに詳しく知りたい場合は、CSS3 トランジション、トランスフォーム、アニメーションの紹介とアプリケーションのデモを参照してください