kokeblog

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

    関連記事

    jQueryのeachメソッドの使い方

    Sassの環境を整える

    jQueryの基礎

    Sassの基礎

    カテゴリー