borderに対してtransitionが効かない時

例えばborder-bottomを使用して下線を表示させる際にtransitionを使ってアニメーションさせたい場合、a:hoverのみにborder-bottom: 1px solid #111;といった記述にしているとtransitionは効かない。

というのも、transitionは要素から要素の状態の変化を動的に設定するので、その始まりのプロパティがないとうまくアニメーションがされない。

NG例

<style>
    ul li a{
        transition: .5s;
        color: black;
    }
    ul li a:hover{
        border-bottom: 2px solid red;
    }
</style>

上記のコードは擬似要素のみにしかborderを記述していないのでうまくアニメーションされない。

OK例

下記のコードのように<a>要素にもborderを記述しておけばtransitionもうまく機能する。transparentと設定しておけばborderは透過の状態になる。

<style>
    ul li a{
        border-bottom: 2px solid transparent;
        transition: .5s;
        color: black;
    }
    ul li a:hover{
        border-bottom: 2px solid red;
    }
</style>