CSSで画像を横にスライドさせる方法 提供:カップめんリスペクト
~CSSで画像を横にスライド~
今回はCSS(スタイルシート)アニメーションを使って画像を横にスライドさせていきます。
後にjavascriptと組み合わせて完全なスライドショーを作るための布石となります。
どこよりも詳しく書いていくので初心者でもすぐにわかります。
レベル1 アニメーションの基本のスタイルシート
まずは最低これだけはっていう基本の型があるので作っていきます。
animation-name:"アニメーションの名前";でアニメーションに名前を付け
animation-duration:"時間(秒数など)s";で一回のアニメーションにかかる時間の設定をし
animation-timing-function:ease;で速さに強弱をつけます。
またanimation-iteration-count:"回数";で動きの回数を設定します。
さらにいったりきたりする動きはanimation-direction: alternate;を使います。
スタイルシートは次のようになります。
imgのpicrotateクラスにしてみました。クラス名は何でも大丈夫です
img.picrotate{ animation-name:picrotation; animation-duration:3s; animation-timing-function:ease; animation-iteration-count:infinite; animation-direction: alternate; }
infiniteは無限回という意味です。
レベル2 細かい動きの設定
細かい動きの設定は
@keyframes アニメーション名{ 処理内容 }
ですることができます。
レベル3 横の動きの設定
横の動きはx軸方向に動かすのでtransform: translateX(〇px);を使います。
初めの位置を0%,終わりの位置を100%として次のように記述します。
@keyframes picrotation{ 0%{ transform: translateX(0px); } 100%{ transform: translateX(400px); } }
これで0pxから400pxの位置に横に動くことになります。
レベル4 ここまでをまとめる
CSS(スタイルシート)をまとめて書くと次のようになります。
img.picrotate{ animation-name:picrotation; animation-duration:3s; animation-timing-function:ease; animation-iteration-count:infinite; animation-direction: alternate; } @keyframes picrotation{ 0%{ transform: translateX(0px); } 100%{ transform: translateX(400px); } }
レベル5 画像を用意して記事中の記述を書く
記事中にはこう書きます。
<img src="画像のURL" class="picrotate">