コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > CSS > 改めて学び直す：CSS Transitionの詳細と実装例

改めて学び直す：CSS Transitionの詳細と実装例

CSS

CSS Transitions: A Detailed Guide With Examples

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

現代のウェブデザインは、静的なページだけではありません。訪問者にインタラクティブな体験を提供することです。これには、ホバーすると色が変わるボタン、ポップアップウィンドウ（モーダル）が表示される、スクロールするとフェードインまたはフェードアウトする要素などのエフェクトが含まれます。

このような動的要素は、多くの場合、さまざまな状態にあります。CSSの遷移を使用すると、これらの状態（ホバー、アクティヴ、フォーカス）の間で要素の外観をスムーズに変化させることができます。このような状態遷移を効果的に使用することで、より魅力的でユーザーフレンドリーなウェブサイト体験を実現し、訪問者を誘導して最も重要なことに集中できるようにします。

CSSのトランジションを使えば、要素の状態遷移がラグくなることはありません。マイクロアニメーションを適用することで、ユーザーが要素とインタラクションする際に、スムーズかつ簡単に状態遷移を行うことができます。

このブログでは、CSSトランジションとは何かを、各プロパティの詳細な例と、ウェブ上で魅力的なエフェクトを作成するための使い方を紹介します。

CSS Transitionとは

CSS Transitionは、CSS プロパティ値の変化を指定された時間をかけて滑らかに変化させることができる機能です。

デフォルトでは、Cascading Style Sheets (CSS) は宣言型の言語であり、ある要素に適用されたスタイルは即座に反映されます。これは、Webページの最初の見た目や感覚を設定するのに非常に便利です。

しかし、要素の状態が変化する場合があります。これは見た目の改善や、ボタン、フォーム、カード、ナビゲーションリンク、ユーザープロファイル、モーダルといった特定の機能を示すためのものです。

例えば、LambdaTestのホームページではトランジションの面白い使用例が見られます。

via GIPHY

CSS Transitionの仕組み

トランジションは、ユーザーがトリガーをかけたときに変化するCSSプロパティを指定することで機能します。これにより、初期状態から最終状態への変化が行われます。

ユーザーがトリガーをかけると、CSS Transitionは、主にホバー効果で使用されますが、フォーカス、アクティブ、JavaScriptイベントなどのCSSの擬似クラスでもトリガーになります。

以下のコードサンプルでは、ホバー、アクティブ、フォーカスの各状態にトランジション効果が適用されています。

HTML:

<body>
    <main class="main">
        <main>
            <!-- Transition -->
        <section class="t">
        <div class="text">
            <p>Click on the input field / Click on the button see effect</p>
        </div>
        <div>
            <input type="text" placeholder="Enter your email address " class="transition">
            <input type="submit" class="transition">
        </div>
    </section>

    <!-- No Transition -->
    <section class="no-t">
        <div class="text">
            <p>This element has no Transition applied</p>
        </div>
        <div>
            <input type="text" placeholder="Enter your email address">
            <input type="submit">
        </div>
    </section>
        </main>
    </main>
</body>

CSS:

*, *::before, *::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    overflow: hidden;
}

.t {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height: 50vh;
    width: 100vw;
    background-color: rgb(226 232 240);
}

.no-t {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height: 50vh;
    background-color: rgb(203 213 225);
    width: 100vw;
}

/* Input Email Button */
[type="text"]{
    padding: 10px 20px;
    border: 1px solid #0ebac5;
    border-radius: 5px;
    outline: none;
}

/* Focus State */
[type="text"]:focus{
    box-shadow: inset 0 0 6px 2px #0ebac5;
}

/* Submit Button */
[type="submit"]{
    line-height: 30px;
    background-color: #0ebac5;
    padding: 0 10px;
    border-radius: 5px;
    border: 0;
    user-select: none;
    cursor: pointer;
    box-shadow: 0 0 0 3px #0ebac5;
}

.transition {
    transition: all 0.3s;
}

[type="submit"]:hover{
    background-color: white;
 }

[type="submit"]:active{
    box-shadow: 0 0 0px 0px #0ebac5;
    transform: translateY(2px);
}

/* Text */
p {
    font-size: 15px;
    font-family: calibri;
    margin-bottom: 1em;
}

CSS Transitionのプロパティ(展開)

CSS Transitionの展開プロパティには以下の4つがあります。

  1. transition-property: どのプロパティをトランジションさせるかを指定します。
  2. transition-duration: トランジションにかかる時間を指定します。
  3. transition-timing-function: トランジションのタイミング関数を指定します。
  4. transition-delay: トランジションが始まるまでの遅延時間を指定します。

例:

.element {
    transition-property: background-color;
    transition-duration: 500ms;
    transition-timing-function: linear;
    transition-delay: 200ms;
}

.element:hover {
    background-color: cyan;
}

CSS Transitionのプロパティ(ショートハンド)

CSSトランジションのショートハンドプロパティは、transition-property、transition-duration、transition-timing-function、transition-delayの4つのプロパティを1行で指定できます。

ショートハンドを使うと、コードがシンプルで保守性が高くなります。

例:

.element {
    /* property name | duration | easing function | delay */
    transition: width 500ms ease 1s;

    /* property name | duration | easing function */
    transition: width 500ms ease;

    /* Apply to 2 properties */
    transition: width .5s, opacity, cubic-bezier(0.075, 0.82, 0.165, 1);

    /* Apply to all changed properties */
    transition: all 300ms ease;

    /* Global values */
    transition: initial;
    transition: inherit;
    transition: revert;
    transition: revert-layer;
    transition: unset;
}

via GIPHY

CSS Transitionの適用方法

CSS Transitionは、要素のスタイルが変化したタイミングに合わせて適用されます。一般的には:hover疑似クラスを使ってトリガーされますが、:focus、:active、JavaScriptイベントなどでもトリガーされます。

CSS Transitionの実装ベストプラクティス

  • トランジションを適用するプロパティは最小限に留める
  • 不要なトランジションは避ける
  • 適切なタイミング関数を選択する
  • トランジションの遅延時間は最適化する
  • アクセシビリティにも配慮する

CSS Transitionのブラウザ対応

CSS Transitionは、現代的なブラウザであればほとんどサポートされています。 ただし、古いブラウザやモバイルブラウザでは部分的にしかサポートされていない可能性があるので注意が必要です。

よくある質問(FAQ)

  1. CSS Transitionとアニメーションの違いは何ですか?

    • CSS アニメーションは、キーフレームを使って複雑なアニメーションを作成できますが、CSS Transitionは単一のプロパティ値の変化に焦点を当てています。
    • CSS アニメーションの方が柔軟性が高く、複雑なアニメーションを実現できますが、CSS Transitionの方が簡単に実装できます。

  2. CSS Transitionはどのように最適化できますか?

    • トランジションするプロパティを最小限に抑える
    • 適切なタイミング関数を選択する
    • トランジションの遅延時間を最適化する
    • hardware acceleration を活用する

  3. CSS Transitionはアクセシビリティに影響しますか?

    • はい、過度なトランジション効果はユーザビリティを損なう可能性があります。
    • ユーザーの操作性を損なわず、視覚的な訴求力を保つバランスを取ることが重要です。

©コハム