transitionの説明【CSS】

Hoverしたら配色を変更する

まずは参考に、transition-durationが設定されていない要素です。マウスをHoverするとすぐさま変化しますね。

:hover擬似クラスを使用します。

.td5:hover {
    background-color: blue;
}

backgorund-color / transition: 1s;

transition-durationを設定する

それでは、transition-durationを設定してみましょう。timeは1秒にしてみました。

.td1:hover {
    background-color: blue;
    transition: 1s;
}

backgorund-color / transition: 1s;

transition-durationを変化が戻るときにも作用させる

おっと、マウスを外した時にパッと戻ってしまいますね。戻るときにもゆっくり変化してもらいましょう。

通常時（hoverしていなとき）のプロパティにもtransition-durationを追加すれば良きですね。

.td3 {
    transition: 1s;
}
.td3:hover {
    background-color: blue;
    transition: 1s;
}

backgorund-color / transition: 1s;

どうでしょうか、hover状態が解除されるときもアニメーションされたと思います。

JavaScriptの利用

mdnのJavaScriptを使用したSampleも魅力的ですね。我々は結局、HTML、CSSときたらJavaScriptも勉強したくなってしまいますよね。

では、取り入れてみましょう。

Buttonを押すと変化します。もう一回押すと戻ります。

JavaScriptの中身は、Buttonを押すと、CSSのclassを付けたり外したりしています。

const changeButton = document.getElementById("change23");
changeButton.addEventListener("click", () => {
    const element = document.getElementById("hello");
    element.classList.toggle("td71");
});

.td7 {
    transition-duration: 0.3s;
}
.td71 {
    background-color: coral;
    transition-duration: 1s;
}

1秒かけてアニメーションします。戻るときは少し早く、0.3秒で戻ります。進むときと戻るときで同じ秒数にする必要はありません。

classの付け外しでも、transitionが作動することを学びました。

一括指定 / A shorthand property

transitionプロパティを使用すると、transition-property、transition-timing-function、transition-duration、transition-delay、を一括で設定できます。

transition: <property> <duration> <timing-function> <delay>;

それでは、transitionプロパティを使用してみましょう。

transition: transform 1.6s cubic-bezier(0.95, 0.05, 0.795, 0.035) 1s;

1秒待機して回転だけ1.6秒間アニメーションします。色の変化は即座に反映。変化速度は三次ベジェ曲線を使用。

同じ秒数の設定がありますが、duration、delayの順番です。

なれてきたら一括指定が便利ですね。

複数のアニメーションを同時に設定する方法

次に複数のtransitionを設定してみましょう。

対象をカンマで区切ると複数設定できます。

次のSampleは、transformの変化を、0.5秒待機して、ease-outで2秒間変化します。と同時に、background-colorの変化を、2.5秒待機して、ease-inで1秒間変化します。

簡単に言うと、「回転後に背景色が変わる」という設定です。

各プロパティで設定する場合と、一括指定で設定する場合の、同じ動作をする2つのSampleです。

.ts1-2:hover {
    transition-property: transform, background-color;
    transition-timing-function: ease-out, ease-in;
    transition-duration: 2s, 1s;
    transition-delay: 0.5s, 2.5s;
    background-color: gold;
    transform: rotate(360deg);
}

.ts1-3:hover {
    transition: transform ease-out 2s 0.5s, background-color ease-in 1s 2.5s;
    background-color: gold;
    transform: rotate(360deg);
}

なれてきたら一括指定が便利ですね。

transitionの完了を検出したタイミングでspan要素を追加する

Sampleとして、transitionの完了時に、span要素を1つ追加するコードを書いてみました。

.ted88-2:hover {
    transition: 1s;
    background-color: darksalmon;
}

const tsnElement = document.getElementById("ted88");
tsnElement.addEventListener("transitionend", () => {
    tsnElement.insertAdjacentHTML("beforeend", "<span>yah! <span>");
});

どうですか？

transition完了後にCSSのclassを追加する

次のSampleは、transition完了時に、色を変更する内容のclassを追加します。

transition完了時にテキスト色がWhiteに変更されます。

.ted88-2:hover {
    transition: 1s;
    background-color: darksalmon;
}
.addClass {
    transition: none !important;
    color: whitesmoke;
}

const tsnTarget1 = document.getElementById("ted89-1");
tsnTarget1.addEventListener("transitionend", () => {
    var judge = tsnTarget1.classList.contains("addClass");
    if (!judge) {
        tsnTarget1.classList.add("addClass");
    }
});
tsnTarget1.addEventListener("mouseleave", () => {
    tsnTarget1.classList.remove("addClass");
});

説明と言い訳

• transitionが完了（transitionend発行）すると、”addClass”が無い場合にのみ”addClass”を追加します。
• マウスがleaveしたら、”addClass”を削除します。
• “addClass” は、colorプロパティで文字色を変更します。このときtransitionは”none”を強制して瞬時に変更します。
• importantを使用した理由は、.ted88-2:hoverのほうが優勢でtransition:1sを上書きできなかったためです。
• contains(“addClass”)のチェックはいらなかったかなと思います。後から見直すと、やっぱり、う～ん、ってことありますよね。
• 当初、このclassを単純にtoggle()で付け替えしようとしたところ、色が変わる度にtransitionが開始され、そして”transitionend”イベントが発行されて、toggle()でまた色が変わるという、無限ループになってしまいました。
• Loopしたい場合はそれでもいいのかもしれませんが、それはAnimationで”animation-iteration-count: infinite”を指定するのがセオリーなのかなと想像しています。
• transition:none; のおかげでtransitionendイベントの発行が止まったと思っています。
• 最終的に、マウスのenter(hover)でclassをaddして、マウスのleaveでclassをremoveする方法に落ち着きました。

linear-gradient()のtransitionを確認

.gra12-1{
    border: blue 3px solid;
    background-image: linear-gradient(90deg, lightblue, 80%, blue);
}
.gra12-1:hover {
    transition: 1s 0.3s;
    border: orangered 3px solid;
    background-image: linear-gradient(90deg, mistyrose, 80%, orangered);
}

あら。だめですね。

borderの色はtransitionしてくれますが、linear-gradient()のグラデーションは瞬時に変更されてしまいました。

linear-gradient()の透過率に着目

私は、ピンときました。

linear-gradient()で使用する色の透過度がtransitionされるか試してみます。

.gra14-1 {
  border: blue 3px solid;
  background-image:
   linear-gradient(90deg, rgba(173, 216, 230, 1), 80%, rgba(0, 0, 255, 1)),
   linear-gradient(90deg, rgba(255, 228, 225, 0), 80%, rgba(255, 68, 0, 0));
}
.gra14-1:hover {
  border: orangered 3px solid;
  background-image:
   linear-gradient(90deg, rgba(173, 216, 230, 0), 80%, rgba(0, 0, 255, 0)),
   linear-gradient(90deg, rgba(255, 228, 225, 1), 80%, rgba(255, 68, 0, 1));
}

あら、全然ダメでした。

擬似要素::beforeを重ねる

さて、他の要素を重ねて、それをtransitionして透かすことにしましょう。

擬似要素::beforeを使用してみます。

もとのdiv要素に、::beforeを重ねて透かします。

.gra13-1 {
    position: relative;
    border: gold 3px solid;
    background-image: linear-gradient(90deg, rgb(255, 247, 208), 80%, gold);
}
.gra13-1:hover::before {
    opacity: 0;
    transition: 1s 0.3s;
}
.gra13-1::before {
    transition: 0.7s;
    content: "gra13-1 before";
    position: absolute;
    left: -3px;
    top: -3px;
    border: blue 3px solid;
    background-image: linear-gradient(90deg, aliceblue, 80%, blue);
    }

成功しましたね。

blue➡goldに変わりました。被せていた擬似要素::beforeがtransitionしながら透明になりました。

ここでの擬似要素::beforeの注意事項がいくつかあります

• z-indexの扱いには注意。今回はz-indexでの調整はしませんでした。
• 擬似クラス:hoverと同時に指定するときの順番に注意。
• 親要素（元の要素）にborder幅があると、::beforeの位置がずれる。topとleftで位置調整しました。

今回は、親要素（元要素）と::beforeの組み合わせでしたが、::afterとの組み合わせでも実現できそうですね。

div要素を被せてからtransitionしてみる

今度は、div要素を被せてみようかな。

<div class="gra15">
    <div class="gra15-1">gra15-1</div>
    <div class="gra15-2">gra15-2</div>
</div>

.gra15 {
    position: relative;
}
.gra15-1 {
    z-index: 0;
    border: gold 3px solid;
    background-image: linear-gradient(90deg, rgb(255, 247, 208), 80%, gold);
}
.gra15-2 {
    position: absolute;
    z-index: 1;
    top: 0;
    border: blue 3px solid;
    background-image: linear-gradient(90deg, aliceblue, 80%, blue);
}
.gra15-2:hover {
    opacity: 0;
    transition: 1s;
}

成功しましたね。

テキストがある場合は、同じテキストにして違和感なく背景が変わったように見せる工夫が必要ですね。

被せる用のhtmlが余計に増えてしまいますので、::beforeで実装したほうがスマートに感じますね。

要素サイズより大きい背景をグライドしてグラデーションのtransitionを実現する

情報の海を探してみると、大きい背景を用意して、表示位置を変更することで、グラデーションのtransitionを実装する方法が見つかります。

そのほか、::beforeと::afterの擬似要素で先ほどの様に、opacityをtransitionする方法も見つかりました。

では、背景の表示位置の移動でtransitionしてみましょう。

<div class="gra16">
    <div class="gra16-1">gra16-1</div>
</div>

.gra16-1 {
    transition: 0.5s;
    z-index: 0;
    padding-left: 3px;
    border-radius: 5px;
    border: gold 3px solid;
    /* background-image: linear-gradient(110deg, lightyellow, gold 50%, aquamarine 50%, lime); */
    background-image: linear-gradient(110deg, lightyellow, gold, aquamarine, lime);
    background-size: 300% 100%;
}
.gra16-1:hover {
    transition: 1.2s;
    border: lime 3px solid;
    background-position: 100% 0;
}

あら。なんかいい感じ。