![「[CSSだけ]スクロールを促すバウンドアニメーション」のアイキャッチ画像](/images/tmb/css-scroll-bound.jpg)

このブログのリストページはカテゴリを4色に分類して横に並べたナビがあります。


スマートフォンなどでは横幅が足りないため横スクロールさせていて、スクロール可能なことをグラデーションで表現していました。


しかし、解像度が合うと3つしかカテゴリがないように見えることに気づいたので、バウンドアニメーションを[取り入れました](https://2001y.me/blog)。


## 横スクロールを促すアニメーション

`Reload`するとわかりますが、アクセス時に左側にスライドしたようなアニメーションで、`margin-left`をマイナスに振ってます。

“`css
.target {
animation: bound .5s forwards;
}
@keyframes bound {
0% {
margin-left: 0;
}
50% {
margin-left: -10vh; //左へ移動
}
100% {
margin-left: 0; //元に戻す
}
}
“`

## 縦スクロールを促すアニメーション

縦スクロールはbodyがメインになることが多いと思うのでこれで良さそう。でも、縦スクロールは一般化してるので、使う場面は少なそう。

“`css
body {
animation: bound .5s forwards;
}
@keyframes bound {
0% {
margin-top: 0;
}
50% {
margin-top: -10vh; //上へ移動
}
100% {
margin-top: 0; //元に戻す
}
}
“`

***

今回は`margin`で動きをつけてるので、`overflow: scroll;`を指定した親要素ではなく、スクロールする要素を指定してあげる必要があります。

親要素に指定するためには、paddingで指定することもできますが、paddingはマイナスの指定ができないので、逆の動きにすることになります。

試しにデモを載せてみたけど、どちらでも動きがあるだけで注目はしてもらえる気がする。

***

というか、今更だけどパフォーマンスを考えると`transform`で指定してあげたほうがいい気がする。