CSSでアニメーションを横から出すには？
Webサイトに動きを加えるアニメーションは、ユーザーの視線を引きつけ、印象的なページを作るための有効な手段です。その中でも、要素を横から出現させるアニメーションは、コンテンツをスタイリッシュに表示する効果的な方法の一つです。
しかし、左右から出現するアニメーションを実装する際には、アニメーション開始時にブラウザの下部に横スクロールバーが表示される場合があります。これは、アニメーション中の要素が一時的に画面の幅を超えてしまうために発生します。
この記事では、CSSを使って横からアニメーションを出しつつ、スクロールバーが表示されないようにする方法を紹介します。
overflow-x: hidden; でスクロールバーを非表示にする
スクロールバーの出現を防ぐには、アニメーションを行う要素の親要素に対して、CSSのプロパティ `overflow-x: hidden;` を指定します。 これにより、親要素の横方向の領域からはみ出したコンテンツは非表示になり、スクロールバーが表示されなくなります。
HTMLの例
<div class="container">
<div class="slide-in">アニメーションする要素</div>
</div>
CSSの例
.container {
width: 100%;
overflow-x: hidden;
}
.slide-in {
width: 300px;
height: 200px;
background-color: lightblue;
/* アニメーションの設定 */
animation: slide-in-animation 1s ease-in-out;
}
@keyframes slide-in-animation {
0% {
transform: translateX(-100%); /* 初期状態：要素全体が左側に隠れている */
}
100% {
transform: translateX(0); /* アニメーション後：要素が元の位置に移動 */
}
}
上記の例では、`.container` クラスを持つ要素が親要素、`.slide-in` クラスを持つ要素がアニメーションを行う要素です。 親要素に `overflow-x: hidden;` を指定することで、アニメーションが実行されてもスクロールバーが表示されなくなります。
アニメーションの種類
横方向のアニメーションには、様々な種類があります。代表的なものを以下の表にまとめました。
| アニメーションの種類 | 説明 |
|---|---|
| translate X | 要素をX軸方向に移動させる。 |
| scale X | 要素をX軸方向に拡大縮小する。 |
| skew X | 要素をX軸方向に傾ける。 |
これらのアニメーションを組み合わせることで、より複雑で動きのある表現が可能になります。
参考資料
* overflow-x - CSS: カスケーディングスタイルシート | MDN * animation - CSS: カスケーディングスタイルシート | MDN * transform - CSS: カスケーディングスタイルシート | MDNよくある質問
Q1. overflow-x: hidden を指定してもスクロールバーが消えない場合は？
A1. HTMLの構造上、アニメーションを行う要素よりも上位の要素に `overflow-x: hidden;` を指定する必要があるかもしれません。
Q2. アニメーションがスムーズに動かない場合は？
A2. アニメーションの速度やタイミング関数を調整することで、より自然な動きに近づけることができます。`animation-timing-function` プロパティを試してみてください。
Q3. モバイル端末でスクロールバーが表示されてしまう場合は？
A3. モバイル端末では、`-webkit-overflow-scrolling: touch;` を親要素に指定することで、スクロールバーの表示を抑制できる場合があります。
その他の参考記事:jquery アニメーション 一覧