Tab移動などに使えるフォーカスアニメーション(サイト制作)

1482 ワード
CSS アニメーション アクセシビリティ CSS テキストリンク 

button{
    outline: 1px solid transparent;
    outline-offset: 5px;
    transition: all 500ms;
}
button:focus{
    outline: 1px solid rgba(0, 0, 0, 0.5);
    outline-offset: 0;
}

outline-offsetプロパティでoutlineとボタンの距離（オフセット）を
指定・変更することで残像のような効果を表しています。
※IE非対応