Webページのアニメーションは、より多くのユーザーを引き付けることができます。これを自問してみてください。かなりのアニメーションを含むWebページを見た場合、もっと調べてみませんか？これで、CSSトランジションを使用して、いくつかの優れたアニメーションで作業を生き生きとさせることができます。そして、気をつけてください、これらは正しく行われる必要があります。 CSSトランジションの世界を次の順序で見ていきましょう。
なぜCSSが移行するのですか？
インスタンスを見てみましょう。要素の色を白から青に変更した場合、この変更はほとんど瞬時に行われます。よりアニメーション化された効果を得るには、この変更を徐々に行うことができます。これは視覚的にも非常に魅力的に見えます。 CSSトランジションを有効にすることで、変更の発生方法をカスタマイズできます。加速曲線に従う特定の時間間隔で要素の変化がどのように発生するかを定義できます。
CSSトランジションを使用すると、の変更を定義できます 要素、特定の時間間隔、加速曲線の速度など。 Flashまたはを使用せずにこれらすべてを行うことができます JavaScript 。
理解を深めるために、以下の画像を参照してください。
上の画像では、HTML要素が1秒以内に赤から青に変わります。遷移が行われているときにも中間色が表示されます。 CSSトランジションを使用しない場合は、赤から青への色の変化が瞬時に行われることに気付くでしょう。中間色は表示されません。 CSSトランジションを使用すると、HTML要素が古い状態から新しい状態に変化するときにアニメーション効果に気付くでしょう。
遷移プロパティ
省略形のtransitionプロパティを使用して、CSS遷移を制御できます。この省略形の使用は簡単であるだけでなく、CSSでのデバッグに非常にイライラする可能性のある非同期パラメーターを回避することもできます。
transition-propertyは、遷移効果が必要なCSSプロパティを指定します。これらのCSSプロパティのみがアニメーション化されます。
構文：
遷移：
初心者として、あなたは速記を使うのにいくつかの困難に直面するかもしれません。速記の使用が今のところ少し複雑だと思う場合は、遷移プロパティを個別に指定できます。 HTML要素の場合、次の例に示すように、遷移プロパティを1つずつ指定できます。
div {幅：100px高さ：100px背景：水色遷移-プロパティ：幅遷移-期間：2秒遷移-タイミング-関数：線形遷移-遅延：1秒} div：ホバー{幅：300px}ボックスにカーソルを合わせる
上記の例では、プロパティ（transition-property、transition-duration、transition-timing-function、transition-delay）とそれらの値を個別に指定しています。これらの遷移プロパティについては、まもなく学習します。
何を指定する必要がありますか？
CSSトランジションを作成するために指定する必要があるのは、主に2つあります。効果を追加するCSSプロパティと、その効果の持続時間です。1つのことを覚えておく必要があります。期間を指定しない場合、遷移はデフォルト値の 0 、効果はありません。
例を考えてみましょう：
以下のコードは、5秒間のwidthプロパティの遷移効果を定義しています。
div {幅：100px高さ：100px背景：青遷移：幅5秒} div：ホバー{幅：600px}カーソルを上のdiv要素の上に移動して、遷移効果を確認します。
上記のコードでは、青いボックスにカーソルを合わせると、青いボックスの幅が5秒間徐々に大きくなることがわかります。また、青いボックスからカーソルを離すと、青いボックスが徐々に（瞬時にではなく）元のサイズに戻ることに気付くでしょう。幅と期間の値を変更して、この遷移プロパティがHTML要素にどのように影響するかを確認することもできます。
トランジション効果を複数のプロパティに追加することもできます。これを行うには、コンマを使用してプロパティを区切ります。例を考えてみましょう：
以下のコードでは、幅、高さ、および変換の遷移プロパティが指定されています。
div {パディング：15px幅：150px高さ：100px背景：緑の遷移：幅2s、高さ2s、変換2s} div：hover {幅：300px高さ：200px変換：rotate（360deg）} こんにちは世界 （ホバーオーバーミー）
上記の例では、ボックスにカーソルを合わせると、緑色のボックスがどのように移動するかがわかります。
プロパティと期間のみを指定しました。さまざまな例で他のパラメータを見てみましょう。
遷移タイミング関数関数プロパティ
このプロパティは、遷移効果の速度曲線を定義します。次の値を取ることができます。
- 使いやすさの価値： これはデフォルト値で、最初は効果が遅く、次に速く、ゆっくりと終了します。
- 線形値： この効果は、トランジションの速度を変更しません。最初から最後まで速度を一定に保ちます。
- イーズインバリュー： この効果はゆっくりと始まります。
- イーズアウト値： この効果にはスローエンドがあります。
- イーズインアウト値： この効果には、スロースタートとスローエンドがあります。
- キュービックベジェ値（n、n、n、n）： キュービックベジェ関数で独自の値のセットを指定できます。
以下のコードは、線形、イーズ、イーズイン、イーズアウト、イーズインアウトの値の遷移効果を示しています。
div {幅：100px高さ：100px背景：ピンクトランジション：幅2秒}＃div1 {トランジションタイミング関数：線形}＃div2 {トランジションタイミング関数：イーズ}＃div3 {トランジションタイミング関数：イーズイン}＃div4 {transition-timing-function：ease-out}＃div5 {transition-timing-function：ease-in-out} div：hover {width：300px}下のdiv要素にカーソルを合わせます
線形
簡易
イーズイン
イーズアウト
イーズインアウト
遷移遅延プロパティ
場合によっては、特定の時間が経過した後にアニメーションを発生させたいことがあります。 transition-delayプロパティを使用すると、トランジションエフェクトの遅延を指定できます。遅延は秒単位で指定できます。
LinuxコマンドラインでJavaクラスパスを設定する方法
遷移効果の遅延を確認する例を見てみましょう。
div {幅：100px高さ：100px背景：黄色遷移：幅3秒遷移遅延：1秒} div：hover {幅：300px}下のdiv要素にカーソルを合わせます
注意： エフェクトが始まる前に1秒の遅延が見られます
上記のコードでは、カーソルで黄色のボックスにカーソルを合わせると、効果がないことがわかります（1秒間）。 1秒待つと、効果がわかります。
これで、このCSSトランジションの記事は終わりです。これで、Webページにアニメーションを追加できます。これらの例を試してください。
私たちをチェックしてください インストラクター主導のライブトレーニングと実際のプロジェクト経験が付属しています。このトレーニングにより、バックエンドおよびフロントエンドのWebテクノロジーを操作するスキルを習得できます。これには、Web開発、jQuery、Angular、NodeJS、ExpressJS、およびMongoDBに関するトレーニングが含まれます。
質問がありますか？ 「CSS移行」ブログのコメント欄にその旨をお伝えいただければ、折り返しご連絡いたします。