cssのアニメーションで、ヘッダー固定のアンカーリンクのズレを対応

cssアニメーションだけで対応できる

※たまにただしく動かない？

css

@-webkit-keyframes modify{
      0% { padding-top: ヘッダーの高さ; margin-top: -ヘッダーの高さ(マイナス); }
    100% { padding-top: 0; margin-top: 0; }
}
@keyframes  modify{
      0% { padding-top: 50px; margin-top: -50px; }
    100% { padding-top: 0; margin-top: 0; }
}

# セレクター:target {
    -webkit-animation: modify 0.1s;
    animation: modify 0.1s;
}

飛ばしたいアンカー先のセレクターを疑似要素:targetで指定