【スライドアニメーション】CSSのみ
はじめに
概要
この記事では、CSSのみでスライドアニメーションを実装する方法について解説します。具体的な実装方法を、コードスニペットを用いて紹介します。CSSのtransitionやtransform、keyframesプロパティを利用したアニメーションの作成方法を詳しく見ていきましょう。CSSのみで実装することで、パフォーマンスの向上が期待できます。
目次
※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。
パターン2
コード
GitHub
上記の実装はこちらからダウロード可能です。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/destyle.css@1.0.15/destyle.css" />
<link rel="stylesheet" href="/style.css">
<style>
@keyframes infinity-scroll-left {
0% {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
.wp-img-box,
.wp-img-wrap {
display: flex;
width: 100vw;
height: 150px;
overflow: hidden;
justify-content: center;
}
.flex-row {
display: flex;
}
.wp-img-box img,
.wp-img-wrap div {
animation: infinity-scroll-left 60s linear 0s infinite both;
height: auto;
max-width: none;
}
</style>
</head>
<body>
<div class="wp-img-box">
<img src="/illust_01.webp" alt="">
<img src="/illust_01.webp" alt="">
<img src="/illust_01.webp" alt="">
</div><!-- /.img-box -->
<div class="wp-img-wrap">
<div class="flex-row">
<img src="https://picsum.photos/500/200?random=1" alt="">
<img src="https://picsum.photos/500/200?random=2" alt="">
<img src="https://picsum.photos/500/200?random=3" alt="">
<img src="https://picsum.photos/500/200?random=4" alt="">
<img src="https://picsum.photos/500/200?random=5" alt="">
<img src="https://picsum.photos/500/200?random=6" alt="">
<img src="https://picsum.photos/500/200?random=7" alt="">
<img src="https://picsum.photos/500/200?random=8" alt="">
<img src="https://picsum.photos/500/200?random=9" alt="">
<img src="https://picsum.photos/500/200?random=10" alt="">
</div><!-- /.box -->
<div class="flex-row">
<img src="https://picsum.photos/500/200?random=1" alt="">
<img src="https://picsum.photos/500/200?random=2" alt="">
<img src="https://picsum.photos/500/200?random=3" alt="">
<img src="https://picsum.photos/500/200?random=4" alt="">
<img src="https://picsum.photos/500/200?random=5" alt="">
<img src="https://picsum.photos/500/200?random=6" alt="">
<img src="https://picsum.photos/500/200?random=7" alt="">
<img src="https://picsum.photos/500/200?random=8" alt="">
<img src="https://picsum.photos/500/200?random=9" alt="">
<img src="https://picsum.photos/500/200?random=10" alt="">
</div><!-- /.box -->
<div class="flex-row">
<img src="https://picsum.photos/500/200?random=1" alt="">
<img src="https://picsum.photos/500/200?random=2" alt="">
<img src="https://picsum.photos/500/200?random=3" alt="">
<img src="https://picsum.photos/500/200?random=4" alt="">
<img src="https://picsum.photos/500/200?random=5" alt="">
<img src="https://picsum.photos/500/200?random=6" alt="">
<img src="https://picsum.photos/500/200?random=7" alt="">
<img src="https://picsum.photos/500/200?random=8" alt="">
<img src="https://picsum.photos/500/200?random=9" alt="">
<img src="https://picsum.photos/500/200?random=10" alt="">
</div><!-- /.box -->
</div><!-- /.img-box -->
</body>
</html>画像はGitHubからダウンロードできます。パターン2の画像はこちらの自動画像生成サイトを使用しております。
解説
keyframes
@keyframes infinity-scroll-left {
0% {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}infinity-scroll-left アニメーションの説明
@keyframesルールはCSSアニメーションのキーフレームを定義します。キーフレームはアニメーションの開始から終了までのステップを指定し、アニメーションの各ステップでどのようなスタイルを適用するかを決めます。
@keyframes infinity-scroll-leftは、要素が右端から左端に移動するアニメーションを定義しています。具体的には、次のような動きを行います。
- 0% キーフレーム
0% { transform: translateX(100%); }- アニメーションの最初の状態を定義しています。
transform: translateX(100%);は、要素をその幅の100%分右に移動させます。つまり、要素は完全に画面の右側に配置されます。
- to キーフレーム
to { transform: translateX(0); }- アニメーションの最終状態を定義しています。
transform: translateX(0);は、要素を元の位置に戻します。つまり、要素は画面の左端に配置されます。
CSS
animationプロパティの実装
.wp-img-box img,
.wp-img-wrap div {
animation: infinity-scroll-left 60s linear 0s infinite both;
height: auto;
max-width: none;
}クラスの解説
.wp-img-box imgは、class属性がwp-img-boxの要素内にあるすべてのimg要素を指します。.wp-img-wrap divは、class属性がwp-img-wrapの要素内にあるすべてのdiv要素を指します。
このセレクタは、指定されたimg要素とdiv要素にスタイルとアニメーションを適用します。
アニメーションのプロパティ
animationプロパティは、アニメーションの設定を一括で行います。infinity-scroll-leftは、適用するアニメーションの名前です（先に説明した@keyframes infinity-scroll-left）。60sは、アニメーションの持続時間です。アニメーションが1回完了するまでに60秒かかります。linearは、アニメーションのタイミング関数です。アニメーションが一定の速度で進行します。0sは、アニメーションの遅延時間です。ここでは遅延なし（0秒）を指定しています。infiniteは、アニメーションの繰り返し回数です。無限に繰り返されます。bothは、アニメーションの適用範囲です。アニメーションの前後で、開始時点と終了時点のスタイルが適用されます。
高さと幅のプロパティ
height: auto;- 画像や要素の高さを自動調整します。要素のコンテンツに応じて高さが決まります。
max-width: none;- 要素の最大幅を無制限に設定します。要素がその親要素の幅に制約されず、元のサイズのままで表示されます。
まとめ
- CSSのみで実装が可能
- パフォーマンスの向上が期待できる
- アニメーションプロパティの理解が必要
- コードはGitHubからもダウンロード可能