CSSアニメーション 作り方。

動きのあるサイトを作ろう。

こんにちは、「ふ」です。
CSSアニメーションのトップページです。ここではCSSアニメーションの概要と、詳細記事へのリンクを貼っていきます。初めての方でも順に学んでいける構成になっていますので、参考にしてください。

もくじ

• CSSアニメーションの仕組み
• キーフレームとanimationプロパティ。
• transition〜もう１つのアニメーション。
• アニメーションに必須のtransform。
• 中間/期末テスト。

記事一覧は右上↗️のメニューボタンから、ご覧ください。
順番に読んでいけば、CSSアニメーション知識のすべてが得られます 🎶

CSSアニメーションの仕組み。

CSSアニメーションは、プロパティの変化を連続的に描画してくれるものです。

<img  class = "fade" src = "sample.svg">

■ sample.svg


画像「sample.svg」を用意しました。class名を「fade」としています。

たとえば。
この画像の不透明度を変化させて、フェードインするアニメーションを実装したいとき。

「「３/*キーフレーム*/」」
@keyframes fade {
    0% {opacity:0;}
    100% {opacity:1;}
}

「「３/*animation関連のプロパティ*/」」
.fade {
    animation-name:fade;
    animation-duration:3s;
    animation-iteration-count:infinite;
}

要素に対して、キーフレーム及びanimationに関するプロパティを指定します。

するとブラウザは、opacity(不透明度)0〜1の連続変化を描画してくれます。

CSSアニメーションは、連続変化させられるプロパティすべてに適用することが可能です。またCSSだけで実装が可能なので、コーディングさえできれば誰でも手軽に始めることができますよ。
当コーナーで実装方法を学んで、おしゃれなサイト作りに役立ててください。

start!

基本的なCSSアニメーションの実装。

〽️ シンプルなものから始めよう。

初めての方はこちら⬆︎。CSSアニメーションの基本形を作ってみましょう。

キーフレームとanimationプロパティ。

それでは、具体的な実装方法についてみていきましょう。CSSアニメーションの実装に必要な指定は、「キーフレーム」と「アニメーション関連のプロパティ」の２つ。

先ほどのコードをもう１度みてみます。

@keyframes fade {
    0% {opacity:0;}
    100% {opacity:1;}
}

コードの前半に記述しているのが、キーフレームです。
キーフレームは、アニメーションの各地点におけるCSSプロパティの状態を指定します。

先ほどのフェードインアニメーションでは「完全な透明」から「完全な不透明」に変化させるものでした。そのため開始（0%）ではopacityを0、終了（100%）ではopacityを1と指定しています。
サンプルでは0%と100%のみの指定ですが、もっと細かい変化を指定することも可能です。

キーフレームには、アニメーションの対象要素と紐付けるための名前が必要になってきます。
はじめのところで「@keyframes fade」とあります。このキーフレームの名前を「fade」と名付けた、ということです。

CSSアニメーション、キーフレームについて。

〽️ アニメーションのシナリオを作る。

キーフレームについては、⬆︎の記事で詳しく紹介しています。

.fade {
    animation-name:fade;
    animation-duration:3s;
    animation-iteration-count:infinite;
}

コード後半の画像要素に直接指定しているのが、アニメーションの時間や繰り返しなどに対するプロパティです。

１つ目のanimation-nameというプロパティは、紐づけるキーフレームの名前を指定します。先ほどキーフレームの名前を「fade」としていました。animation-nameの値も「fade」とすることで、キーフレームfadeの内容にしたがって要素をアニメーションさせることができるようになります。

その他のanimation関連プロパティを使って、時間や再生方向などの指定を行います。
プロパティには以下のものがあります。

animation-name:「「３〇〇」」;「「１ ..@1@」」
animation-duration:「「３〇〇s」」; 「「１..@2@」」
animation-iteration-count:「「３〇〇」」; 「「１..@3@」」
animation-delay:「「３〇〇s」」; 「「１..@4@」」
animation-timing-function:「「３〇〇」」; 「「１..@5@」」
animation-direciton:「「３〇〇」」; 「「１..@6@」」
animation-fill-mode:「「３〇〇」」; 「「１..@7@」」
animation-play-state:「「３〇〇」」; 「「１..@8@」」

animation:「「３〇〇 〇〇 〇〇」」; 「「１..@9@」」

@1@ animation-name
紐づけるキーフレームを指定します。

@2@ animation-duration
アニメーション１回あたりの所要時間を指定。

@3@ animation-iteration-count
アニメーションの繰り返し回数を指定します。

@4@ animation-delay
アニメーションの開始に時間差をつけたい場合、このプロパティで指定します。

CSSアニメーション、animation-delay。

〽️ アニメーションの時間差攻撃。

@5@ animation-timing-function
アニメーションの進捗具合を指定します。これにより「ゆっくり始まり、急速に終わる」などの変化をつけることが可能です。
値にはあらかじめ用意されている関数のほかに、コマ送りアニメーションのためのsteps( )や任意の進捗を指定できるcubic-bezierなどがあります。

animation-timing-functionについて。

〽️ 進捗具合をコントロール。

CSSアニメーション、cubic-bezier。

〽️ 進捗を自由に指定。

CSSアニメーション、stepsでコマ送り動画。

〽️ タイムラプスは、これ。

@6@ animation-direction
アニメーションの再生方向を指定します。順再生/逆再生のほかにもalternate（順再生と逆再生を交互に繰り返す）を指定することもできます。

animation-directionで再生方向を指定。

〽️ 繰り返しにも使える。

@7@ animation-fill-mode
アニメーション終了時の状態を指定します。完了時、規定の（アニメーションが始まる前の）状態にもどすのか、終了時の状態を保つのか、などを選択することができます。

CSSアニメーション、終了時の状態を指定〜animation-fill-mode。

〽️ 終わったままにするか、元に戻すか。

@8@ animation-play-state
アニメーションの再生/停止状況を指定します。クリックなど、何らかのユーザのアクションに応じて切り替えるのが一般的です。

CSSアニメーション、animation-play-state。

〽️ 再生/停止のコントロール。

@9@ animationプロパティは、@1@〜@8@のプロパティを一括で指定できるショートハンドです。

プロパティ概要と一括指定について。

〽️ シンプルなものから始めよう。

transiton〜もう１つのアニメーション。

ここまで紹介してきたのは、CSSのキーフレームアニメーションと呼ばれているものです。CSSにはtransitonという、もう１つのアニメーションが用意されています。

多様なプロパティの変化が実装できるキーフレームアニメーションに対し、transitionアニメーションはキーフレームを持たず、単一の変化しか扱うことができません。
そのかわり実装がとても簡単です。
ユーザのアクションに反応させてちょこっとだけアニメーションさせる、などといったケースに向いています。

<button id = "btn">
button
</button>

ボタンを１つ作りました。
擬似クラスhoverを使って、マウスカーソルが上に乗ったときに背景色が変化するようにします。

#btn:hover {
    background-color:coral;
}

要素の上にマウスカーソルを乗せる（タッチデバイスの場合はタップ）すると、背景色が変化します。

今はボタンの背景色は一瞬で切り替わるようになっています。
ここにtransitionを加えることで、変化をアニメーションさせることができます。

#btn {
    transition-duration:1s;
}

transition-duration（変化に掛かる時間）を１秒に指定しました。

こちらが実装後のものです。
要素にカーソルを乗せる（タップする）と、１秒間かけてボタンの背景色が変化します。

transitionは手軽に実装できるので、方法を学んでおきましょう。
transitionアニメーションに関する記事はこちら⬇︎。

CSSのtransitionについて@1@。

〽️ 基本形を学ぼう。

CSSのtransitionについて@2@。

〽️ プロパティと一括指定。

スマホでのhoverを考える。

〽️ ４つのパターンで検証。

CSS、hoverで親要素/子要素をtransition。

〽️ 複数セットも簡単。

transform〜変形。

transformは、要素の移動/回転/傾斜/拡大縮小という４種類の変形を可能にするプロパティです。

transform:rotate(20deg) 「「１..@1@」」
transform:scale(1.5) 「「１..@2@」」
transform:translate(50%) 「「１..@3@」」
transform:skew(10deg) 「「１..@4@」」

４種類の変形。

@1@ rotate:回転
@2@ scale:拡大/縮小
@3@ translate:移動
@4@ skew:傾斜

これらを組み合わせることで、モーショングラフィックさながらのアニメーションを作成することが可能です。

よく見かける「ふわふわ」アニメーションや「ぽよん」としたバウンドアニメーションにも、transformプロパティが使われています。

ふわふわアニメーション。

transformのtranslate（移動）を使ったふわふわアニメーションの例⬆︎です。

<img id = "kumo" src = "kumo.svg">

#kumo {
    「「３/*参照するキーフレーム*/」」
    animation-name:kumo;
    「「３/*１回の所要時間*/」」
    animation-duration:0.8s;
    「「３/*進捗の度合い*/」」
    animation-timing-function:linear;
    「「３/*再生方向を交互に*/」」
    animation-direction:alternate;
    「「３/*繰り返し:無限*/」」
    animation-iteration-count:infinite;
    }

「「３/*キーフレーム*/」」
@keyframes kumo {
    0% {transform:translateY(0%);}
    100% {transform:translateY(-4%);}
}

「translateY」というのはtranslateの一種で、Y(垂直）方向に特化した移動を指定します。
transformはCSSアニメーションに欠かせないプロパティです。各内容について掘り下げた記事を参考にしてください。

CSS、transformの概要。

〽️ transformで、できること。

CSS、要素を回転〜transform rotate。

〽️ x/y/z方向のいづれにもOK。

CSS、拡大縮小〜transform scale。

〽️ 要素の反転もできる。

CSS、要素の移動〜translate。

〽️ エンドレスも可能。

CSS、要素を傾斜させる〜transform skew。

〽️ xy方向に要素が倒れます。

transform:skewの仕組みを理解する。

〽️ ５つの法則が存在します。。

組み合わせと変形の基準点。

transformの各値は組み合わせることもできます。⬇︎のコードでは移動であるtranslateと、拡大縮小であるscaleを同時にアニメーションさせています。

またtransform-originというプロパティは「変形の基準点」を指定します。コードでは「bottom」と、基準を要素の下端に設定しています。

以下のサンプルは、transformのscale（拡大縮小）と、translate（移動）を組み合わせたものです。また変形の基準点を「bottom（要素の下端）」とすることで、地面にバウンドする様子を表現しています。

<img id = "fu" src = "fu.svg">

@keyframes fu {
    from {
        transform:「「１translateY(-50%) scale(0.95,1)」」;
    }
    to {
        transform:「「１translateY(0%) scale(1,0.9)」」;
    }
}

#fu {
    「「３/*変形の基準点を指定*/」」
    transform-origin:bottom;
    
    animation-name:fu;
    animation-duration:1s;
    animation-timing-function:ease-in;
    animation-direction:alternate;
    animation-iteration-count:infinite;
}

こんな「ポヨンとはねる」アニメーションも、youtubeなどでよく見かけますよね。

CSSアニメーション、transform-origin。

〽️ 「変形の基準」とは？

CSSアニメーション、transformの複数指定。

〽️ 掛け合わせると動きはどーなる？

ここでテストです。

腕試し用のページも、用意しました。
これらのテストは、カンニングを大いに推奨します。自分で調べながら、課題を完成させてみてください。

🔸 キーフレームアニメーションの基礎を学んだら、挑戦してみましょう⬇︎

CSSアニメーション、中間テスト。

〽️ 基本編を終えたらチャレンジしよう。

🔸 transitionとtransformに関する、腕試しです。⬇︎

CSSアニメーション、期末テスト。

〽️ transform/transitionのスキル。