【デモあり】AMPでも大丈夫！CSSだけで要素をアニメーションさせる

サイトに動きを持たせたい場合、よくJavaScriptを使ったりしていました。
が、AMPの登場により、できるだけJavaScriptは使いたくない今日この頃。

そこで、CSS3のアニメーションをうまく使いこなせるようまとめてみました。
トリガーがまだjsに頼るしか思いつかないのですが、AMPでもそのうちJavaScriptを使えるようになる時が来ると思うのでそれはまたその時に。

今回はCSS3のアニメーションを使って要素を動かす方法。
デモはコチラ。

ちなみに、AMPでも使えます。
AMP用のデモはコチラ。

ではいってみましょう。

[ad]

HTML・CSS
animation
@keyframes
まとめ

HTML・CSS

デモでは、AMP対応の為今回のアニメーションに不要なソースが入っているので、必要な箇所だけまとめました。

See the Pen animation by takio (@webmemo) on CodePen.

HTMLで大事なのは動かしたい要素にクラスを振る事だけです。
CSSで大事なのは、HTMLで振ったクラスにanimationを付ける事と、@keyframesで動きを作る事です。

animation

必要な部分だけ抜き出すと

animation:anm 2s infinite linear alternate;

だけです。

これは、省略しているので(ショートハンド)詳しく要素を見ていきましょう。

まず、animationプロパティには、animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-stateという8つのプロパティがあります。
それを、8つも書くの手間だぜ～って時の為に省略した書き方ができる「animation」が存在します。なので、animationには最大8つ値を指定する事ができます。指定しないと初期値が入ります。

それぞれ役割がありますが詳しく書き出すととめどなくなるので、今回は役割と初期値と設定可能な値を見ていきましょう。
それぞれのプロパティについて詳しいお話はまた別の機会にまとめていきたいと思います。

animation-name

・アニメーション・ネーム
・省略不可
・名前を入力

そのままですが、アニメーションの名前を指定するプロパティです。
アニメーションは、@keyframesで作ります。どの動きさせますか～ってのを指定するイメージですね。
今回のデモなら「anm」という名前でkeyframesを作っているので、コレを指定します。これは、省略できません。どんな動きするのか指示が無ければ動けないので。

animation-duration

・アニメーション・デュレーション
・省略不可
・秒数を入力

アニメーションさせる時間の指定です。
これも、省略できません。初期値が0sなので省略すると動きません。
指定は、数値＋「単位」です。
単位は「s」と「ms」があります。秒と、ミリ秒(1/1000秒)です。

animation-timing-function

・アニメーション・タイミング・ファンクション
・省略可
・初期値「ease」
・9パターンから選択

これは、開始から終了までのアニメーションの動き方です。
値は9種類あります。
・ease：開始・終了が緩やかな動き
・ease-in：開始は緩やか、終了は速い
・ease-out：開始は速い、終了は緩やか
・ease-in-out：開始・終了が緩やか
・linear：一定
・step-start：開始時に最終の状態
・step-end：終了時に最終の状態
・steps：指定した値の段階で変化する
・cubic-bezier：次ベジェ曲線の軌跡で進行度を指定

animation-delay

・アニメーション・ディレイ
・省略可
・初期値「0」
・秒数を入力

アニメーションが始まるまでの時間を指定するプロパティです。
指定は、数値＋「単位」です。
単位は「s」と「ms」があります。秒と、ミリ秒(1/1000秒)です。

animation-iteration-count

・アニメーション・イテレーション・カウント
・省略可
・初期値「1」
・数値もしくはinfiniteで指定

アニメーションの繰り返し数を指定するプロパティです。
無限ループは「infinite」になります。

animation-direction

・アニメーション・ディレクション
・省略可
・初期値「normal」
・4パターンから選択

再生方向を指定するプロパティです。
値は9種類あります。
・normal：順方向
・reverse：逆方向
・alternate：順・逆の繰り返し
・alternatereverse：逆・順の繰り返し

animation-fill-mode

・アニメーション・フィル・モード
・省略可
・初期値「none」
・4パターンから選択

アニメーションの開始前、終了後のスタイルを指定するプロパティです。
値は9種類あります。
・none：開始前・終了後にアニメーションのスタイルは反映されない
・forwards：アニメーション終了時、アニメーション終了のスタイルが反映
・backwards：アニメーション開始時、アニメーション開始のスタイルが反映
・both：forwards、backwardsの両方が反映される

animation-play-state

・アニメーション・プレイ・ステート
・省略可
・初期値「running」
・2パターンから選択

アニメーションの再生・停止を指定できるプロパティです。
・running：アニメーション実行
・paused：アニメーション停止
ボタン等でアニメーション開始・停止を制御する際等に使います。

@keyframes

@keyframes ○○{}は、animationとセットで使う、開始から終了でどうアニメーションさせるか？を指定するためのものです。

@keyframes anm {
    0% {transform:translate(0, 0) rotate(-10deg);}
    50% {transform:translate(0, -10px) rotate(0deg);}
    100% {transform:translate(0, 0)rotate(10deg);}
}

0%が開始の状態、100%が終了の状態で、今回はフワフワさせるのにtransformとrotateを使っていますが、透過にしたり色を変えたりといった変化もできます。
間に50%を挟んで逆回転させていますが、もっと細かく10%とかでも書けるので、いろんな動きが可能です。