CSS

CSSの@keyframesを使って画像を横にスライドさせる方法

投稿日:2018/06/21 更新日:

CSS(スタイルシート)の@keyframesを使うと画像をスライドさせるようなアニメーションを実装することができます。

今回はフィギュアスケートをする男性の画像を氷の上を滑っているような感じでスライドさせてます。

CSSの@keyframesを使って画像を横にスライドさせる方法

CSSでアニメーションを表現するには「animation」プロパティと「@keyframes」プロパティを使います。

animationプロパティと@keyframes

animationプロパティはアニメーションに設定する値を一度に設定できるプロパティです。

animationプロパティの使い方

animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-derection

 

animation-name
利用するキーフレームの名前。
animation-duration
実行する時間。
秒(s)またはミリ秒(ms)で指定する
animation-timing-function
実行する速度のパターン。
ease:ゆっくり変化を始め、途中で加速し、減速して終わる。
liner:一定の速度で変化する。
ease-in:ゆっくり変化を始め、途中で加速する。
ease-out :高速で変化を始め減速しながら終わる。
ease-in-out:ゆっくり変化を始め、徐々に途中で加速し、減速しながら終わる。
animation-delay
アニメーションが開始されるまでの待機時間。
秒(s)またはミリ秒(ms)で指定する。
animation-iteration-count
実行する回数。
数値:アニメーションを実行する回数。
infinite:アニメーションを無限に繰り返す。
animation-derection
アニメーションを繰り返す時に逆再生するかを指定。
normal:通常の方法でアニメーションを繰り返す。
alternate:奇数回は通常通り、偶数回は逆向きにアニメーションを繰り返す。

@keyframesはアニメーションで変化させる内容を指定します。

@keyframesの使い方

@keyframes animation-name { キーフレーム{ 変化させるプロパティ: 値; } }

キーフレーム
%値:%値を指定します。
10秒のアニメーションの場合は、30%が3秒時点、80%が8秒時点を示します。
from:開始点を指定します。0%と同値です。
to:終了点を指定します。100%と同値です。

画像を左右にスライドさせるCSSアニメーション

実際に画像を左右にスライドさせるには@keyframesの値を「0%(左端)->50%(右端)->100%(左端)」のように画像のX軸の位置をずらします。

HTMLには画像のクラスに作成した「.slider」クラスを指定します。

実際にコーディングすると以下のようにスケーターが左右にスライドして見えます。
フィギュアスケートをする男性

まとめ

CSSの@keyframesを使うと簡単に画像をアニメーションのようにあつかえるようになります。

以上、「CSSの@keyframesを使って画像を横にスライドさせる方法」でした。

スポンサーリンク

当サイトのおすすめ記事

パソコン 1

初心者でも失敗しないレンタルサーバーの選び方ですが、最近ではブログを立ち上げて、そこから広告収入を得る「アフィリエイト」が随分一般的になりました。 私の周りでも実際にやっている人が多くいます。 アフィ ...

プログラミング 2

SQLでIFを書けばWHERE句の内容を変えて検索できますが、条件ごとに同じようなSQLを 複数回書くのは面倒なので、1行で分岐できないかと言う事でSQLを作って見ました。 SQLでIFを使わずに条件 ...

SQLServer 3

SQLServerで発生するエラーコードをSQLで取得する SQLServerで発生したエラーコードの内容を メッセージが定義されているテーブルから取得します。 エラーコードを取得するSQL SQLs ...

4

SQLServerでは「ユーザー定義型」と呼ばれる独自のテーブル型をした戻り値を返す関数を作成することができます。 その作り方と使い方を解説します。 SQLServerでテーブル型を戻り値とする関数を ...

5

アフィリエイトでいきなり成果を出すのは難しいです。 でも、成果がないとレンタルサーバー代やドメイン代がペイできません。 しかも長い間、結果がでないとやる気もなくなってしまいます。 そういったことを防ぐ ...

-CSS
-,

Copyright© ソフトウェア開発日記 , 2018 All Rights Reserved.