下線を実現するための CSS3 トランジションの例コード

/*以下と同等*/
遷移プロパティ: 幅;
遷移期間: 1秒;
遷移タイミング関数: 線形;
遷移遅延: 2秒;

/*cssコード*/

h2{
    位置: 相対的;
    パディング: 15px;
    テキスト配置: 中央;    
}
ボタン{
    幅: 100ピクセル;
    高さ: 40px;
    境界線の半径: 15px;
    境界線: なし;
    背景: #188FF7;
    色: #fff;
    アウトライン: なし;
    カーソル: ポインタ;
    フォントの太さ: 太字;
}
ボタン:ホバー{
    背景: #188EA7;
}
。容器{
    幅: 600ピクセル;
    ディスプレイ: フレックス;
    flex-direction: 列;
    アイテムの位置を中央揃えにします。
    マージン: 0 自動;
    
}
。ライン{
    位置: 絶対;
    左: 0;
    下部: 0;
    高さ: 3px;
    幅: 100%;
    遷移: 変換 .5s;
    背景: #188EA7;
    色: #188EA7;
    変換: scaleX(0);
    zインデックス: 1111;            
}

@keyframes changeColor1{
    から{
        色: #000;
    }
    に{
        色: #188EA7;
    }
}
@keyframes changeColor2{
    から{                
        色: #188EA7;
    }
    に{
        色: #000;
    }
}
<!--html コード-->

<div class="コンテナ">
    <h2 id="タイトル">
        Baidu フロントエンド アカデミー<i class="line" id="line"></i>
    </h2>
    <button id="change">変更</button>
</div>
//jsコードの部分（function(){
    btn = document.getElementById('change');
    h2 = document.getElementById('title'); とします。
    line = document.getElementById('line'); とします。
    count = 0 とします。
    btn.onclick = 関数（）{
        if(count%2===0){
            line.style.transform = "scaleX(1)";
            h2.style.animation = "changeColor1 1s";
            h2.style.color = "#188EA7";
            カウント++;
        }それ以外{
            ラインスタイル変換 = "スケールX(0)";
            h2.style.animation = "changeColor2 1s";
            h2.style.color = "#000";
            カウント++;
        }
        
    }
})();