CSSアニメーションの基礎

2020年03月19日

フロントエンド

自分自身CSSはある程度かけるのですが、CSSアニメーションについてはあまりかけないので今回、自分の勉強がてらこのブログにまとめていこうと思います。

CSSアニメーションには「transition」と「animetion」が使えます。「animation」は「keyframes 」で始まりから終わりまでの途中で細かくアニメーションを設定することができます。

transitionについて

まずはtransitionについてです。

transitionは自動で再生されずクリックしたりホバーしたときにアニメーションが再生されます。ループもできません。ボタンを押したときやメニューが開くときのアニメーションはこのtransitionを使っていますね。

taransitionのプロパティ

transitionのプロパティは以下の4つあります。

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

各プロパティについて詳しく書いていきます。

transition-property

transition-propertyはtrasitionの対象になるCSSプロパティをしてするプロパティです。各プロパティ名を設定できます。background-colorなどですね。カンマ区切りで複数指定することもできます。他にはallと設定すればすべてのプロパティを指定できます。noneも設定できるみたいですが何も指定していないということなのであまり使う機会はないかもしれませんね。

transition-duration

transition-durationはアニメーションが再生される時間を指定するプロパティです。初期値は「0s」で「1s」 など自分の好きな時間を設定できます。マイナスの値を設定しようとすると初期値の「0s」となるようです。

transition-timing-function

transition-timing-functionは、アニメーションの速度の変化を設定できるプロパティです。速度の変化のことをイージングとも言いますね。以下の値を設定できます。

  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • linear

「 ease 」は最初にゆっくりとはじまり途中加速して最後はゆっくりと終わる感じです。初期値になっています。 「ease-in」は最初はゆっくりとはじまり徐々に加速していきます。「ease-out」は最初加速してはじまりゆっくりと終わってきます。「ease-in-out」 「ease」と似ていますが、 「ease」よりもゆっくりとはじまるというところが違います。「linear」は一定の速度でアニメーションされます。

イージングはこれだけしか用意されていませんが自分が思っているようなものと違うときには「cubic-bezier」を使って自分で数値を設定することもできます。ただ、数値だけ見て設定するのはかなり厳しいので少し使いづらい印象があるかもしれません。なので視覚的にイージングを設定できるツールを活用しましょう。検索すれば出てくると思いますし、googleのデベロッパーツールにもあるので上記で設定できないようなイージングを使いたい場合は便利なツールをガンガン活用していきましょう。

transition-delay

transition-delayはアニメーション開始までの時間を指定するプロパティになります。 transition-delayと同じ時間の指定のしかたになります。マイナスの数値を指定した時も同じように0sとなります。

backgroundのようにショートハンドでまとめたければ「transition: property duration timing-function delay;」の順番で書きます。省略した部分は初期値となります。

transitionを使ったCSSアニメーションの例

ホバーしたときに1秒間かけて青から緑へ変化しつつ正方形が大きくなるような簡単なアニメーションの例です。

次に実際に使えそうなボタンのアニメーションを作ってみました。ホバーすると文字色と背景色が変わり、borderで囲うようなアニメーションです。

animationについて

続いてanimationについてです。

aniationは自動再生でき、ループ再生もできます。また最初にも書きましたがkeyframesで細かくアニメーションを設定できます。ローディングのアニメーションなどでこのanimetionは使われていますね。

animationのプロパティについて

animationでは以下のプロパティが使用できます。

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

ただ上記のプロパティだけではアニメーションさせることができないのでkeyframesを使ってアニメーションさせます。

各プロパティについて詳しくまとめていきます。

animetion-name

animation-nameはアニメーションの名前でアニメーションをkeyframesの名前でもあります。 animation-nameと keyframesが一致していないとアニメーションが再生されません。

animation-duration

animation-durationはアニメーションの再生時間を指定できるプロパティです。 transition-durationと同じですね。こちらも初期値は「0s」、同じように自由に時間を設定できます。

animation-timing-function

animation-timing-functionもtransition-timing-functionと同じですね。イージングを設定できます。下記のプロパティを設定できます。

  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • linear

各プロパティの説明はtransition-timing-functionと同じなので省きます。 「cubic-bezier」 を使って設定することももちろんできます。

animation-delay

animation-delayもtransition-delayと同じように アニメーション開始までの時間を指定するプロパティになります。 指定の仕方も同じです。マイナスの値を指定すると初期値の0sになります。

animation-iteration-count

animation-iteration-countはアニメーションの再生回数を設定できます。初期値は1で1回再生して終わります。「infinite」を指定すると無限ループさせることができます。

animation-direction

animation-directionはアニメーションの再生方向を指定できます。下記のプロパティを指定できます。

  • normal
  • reverse
  • alternate
  • alternate-reverse

「normal」は初期値で最初にアニメーションされた再生方向を繰り返します。「revers」文字どうり通常のアニメーションの逆順に再生します。ループの場合は逆準のアニメーションをループ再生します。「alternate」は繰り返し回数が奇数の場合はnormalと同じように標準の方向、 、偶数の場合はreversのように通常の逆順で再生されます。「alternate-revers」はalternateの逆で繰り返し回数が奇数の場合はreversと同じように再生され、偶数のときはnormalと同じように再生されます。

animation-fill-mode

animation-fill-modeはアニメーション再生後に要素をアニメーション後のスタイルで維持するかどうかを指定できます。 下記のプロパティを指定できます。

  • none
  • forwards
  • backwards
  • both

「none」は初期値でアニメーション後のスタイルの変更を維持しません。「forwards」はkeyframes 最後のスタイルを維持します。「backwards」は先ほどのforwarsdsの逆でkeyframesの最初のスタイルを維持します。「both」はforwardsとbackwardsの両方を合わせたものになります。

こちらもショートハンドでまとめたければanimetion: name duration timing-function delay iteration-count direction fill-mode;の順番で書きます。省略された部分は初期値になります。

animationを使ったCSSアニメーションの例

animationを使った簡単なアニメーションの例です。

図形をただ回転させたものになります。

背景色を青→赤の順番に変えています。

まとめ

今回、CSSアニメーションの基礎的な部分をまとめていきました。CSSアニメーションを使うときは大体調べてコピペしてというのが多かったので理解できていない部分も多かったですね。基礎的な部分は学べたのでこれからいろいろ自分でCSSアニメーションを自分の作品の中で触っていき、応用的なこともできるようになっていきたいです。触っていて結構楽しかったので積極的に使っていきます。

Pocket

related

gulpでsassのコンパイルするための環境構築

今回は、gulpでsassをコンパイルするために環境構築したので、まとめていこうと思います。Macで環境構築したのでMacでの手順でまとめていきます。とはいえほとんどWindowsも変わらないので同じ

フロントエンド

2020.08.22

JavaScriptのデータ型について

JavaScriptのオブジェクトについて勉強していくとデータ型について出てきたので一度ブログにまとめて整理していこうと思います。 データ型 データ型は大きく分けると、プリミティブ型(基本形)とオブジ

フロントエンド

2020.09.22

よく使うjQueryメソッド備忘録

結構jQueryを触っていてこのメソッドどうやって書くんだっけと、ついど忘れしてしまうときがあって、いちいちそのためにググってというのもめんどくさいので、備忘録としてここにまとめておきます。今後もなに

フロントエンド

2020.07.09

Hexoを使ってみた

今回は、静的サイトジェネレーターのひとつであるHexoを使って日記的なサイトを作ってみたので簡単な紹介とHexoの使い方などまとめていこうと思います。制作したサイトのURLはこちらです。URL(htt

フロントエンド

2020.09.11

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き