231 views

【1】やりたいこと

<a>タグの上にマウスを置いた時に、その外枠の色を変えたい。
このときに、外枠の色を 0.5秒かけてじんわりと変化させたい。

【2】やってみる

以下、Sassで書く。
3行目の translateで、borderの表示を 0.5秒間で実行するように指示している。

a{
    display: inline-block;
    transition: border 0.5s;
    &:hover{
        border: 1px solid #f00;
    }
}