未分類

CSSアニメーションでふわっとさせたりスライドさせる【サンプルあり】

ページに簡単なアニメーションがあると、サイトがおしゃれに見えますよね。

CSSのアニメーションは@keyframesを使うことで実装可能です。

@keyframesは、@がついていて普通のCSSと見た目が少し違うので難しく感じるかもしれません。

 

ただ実際にはとてもシンプルで簡単に使えます

 

この記事では、CSS3の@keyframesを使ったアニメーションのやり方とサンプルを紹介していきます。

CSSアニメーションの基礎

まずは簡単に@keyframesの使い方をみていきます。

@keyframesでアニメーションさせるためにまず覚えることは下記2つだけです。

1:@keyframesでアニメーションの動きを定義
2:animation-nameで定義されたアニメーションを指定

ここにオプションとしていくつかの「animation-」プロパティをつけていくとアニメーションが完成します。

簡単な例をみてみます。

ふわっとさせるCSSアニメーション

[codebox title=”HTML”]

[/codebox]

[codebox title=”CSS”]

[/codebox]

@keyframesでFadeinというアニメーションを定義し、animation-nameで作成したFadeinを指定しています。

@keyframes内では%指定をすることで段階的な変化をつけることが可能です。

 

次に「animation-」プロパティをいくつかオプション的につけていきます。

この例では「animation-duration」と「animation-iteration-count」を使っています。

 

animation-duration

animation-durationではアニメーションの秒数を指定できます。

この例では3sなので3秒かけてネコの画像が表示されるアニメーションになります。

 

animation-iteration-count

またもう1つ、animation-iteration-countを使用しています。

こちらはアニメーションを何回繰り返すかを指定します。

infiniteは無限回です。

ここでは例として使用しているので、infiniteで永遠にループさせています。

スライドさせるCSSアニメーション

[codebox title=”HTML”]

[/codebox]

[codebox title=”CSS”]

[/codebox]

スライドするアニメーションにはtranslateX()を使用します。

translateX()はX軸の移動を表現できます。

 

0%(初期状態)をマイナスにすることで画面外に配置し、アニメーション終了時点で0pxになるようにすることでスライドさせています。

回転させるCSSアニメーション

[codebox title=”HTML”]

[/codebox]

[codebox title=”CSS”]

[/codebox]

回転するアニメーションはtransform: rotate()を使用することで実装できます。

ふわふわさせるCSSアニメーション

[codebox title=”HTML”]

[/codebox]

[codebox title=”CSS”]

[/codebox]

このアニメーションでは新たに「animation-direction」と「animation-timing-function」が登場しています。

animation-direction

animation-directionではアニメーション再生の向きの指定が可能です。

プロパティ 動き
animation-direction:normal 順方向
animation-direction:reverse 逆方向
animation-direction:alternate 毎回反転。初回は順方向
animation-direction:alternate-reverse 毎回反転。初回は逆方向

これだけだとわかりにくいのでanimation-directionにnormalとalternateをそれぞれ指定した際の動きをみてみます。

animation-direction:normal

animation-direction:alternate

animation-direction:normalでは0%から100%のアニメーションが終わった後、また0%から次のアニメーションが始まります。

animation-direction:alternateでは0%から100が終わった後は、100%から0%へのアニメーションが始まるため、切れ目のないアニメーションになります。

その他のanimationプロパティ、ショートハンド

ここまでで紹介していないものを含めて、全部でanimationプロパティは8つあります。

プロパティ 説明 初期値
animation-name アニメーション名
animation-duration アニメーションにかかる秒数 0s
animation-delay アニメーションがいつ始まるか 0s
animation-iteration-count アニメーションを繰り返す回数 1
animation-direction アニメーションの再生方向 normal
animation-timing-function アニメーションの進行速度 ease
animation-fill-mode アニメーション実行前後のスタイル指定 none
animation-play-state アニメーションの再生・一時停止 running

ちなみにこれらは省略して1行で書くこともできます。
[codebox title=”CSS”]

[/codebox]

プロパティ値の指定は基本的にそれぞれのanimationプロパティで重複しないため順不同で書くことが可能です(例:normalとeaseが逆でもOK)
ただしanimation-durationとanimation-delayに関しては、指定方法が○sで同様になってしまうため、順番が意味をもち、先に書いた○sがanimation-durationでの値になります。

上記の例では下記のように指定したことになります。
[codebox title=”CSS”]

[/codebox]

便利ではありますが、これだとそれぞれのプロパティを覚えにくいので、慣れないうちは別々に書くことをオススメします。

まとめ

アニメーションができると、WEB制作がとても楽しくなります。
ぜひ試してみてください。

以上、@keyframesを使ったCSSアニメーションの紹介でした。