動くCSSのためのメモ

CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)

CSSで動かす

「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。
例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。

p {
	transition: font-size 1s;
}

動かすためのマストプロパティ

CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティanimationプロパティ!関連するプロパティを以下にまとめました。これらを使い倒して、いろいろなエフェクトが表現できます。

transitionプロパティ

transition-propertyトランジション・プロパティプロパティ
効果を適用したいプロパティ名を指定します。
  • none
  • all(初期値)
  • CSSプロパティ名
transitionを適用できるプロパティは、プロパティの値を数値で表現できるものすべて。colorの値に使われるredlightSeaGreenなどの色名も、RGBなどの数値で表すことができるのでちゃんと適用されます。
transition-durationトランジション・デュレーションプロパティ
変化の開始から完了までにかかる時間を、秒数で指定します。
  • 0s(初期値)
  • 秒数
1秒(1000ミリ秒) = 1s1000ms
transition-timing-functionトランジション・タイミング・ファンクションプロパティ
変化の仕方(イージング)を指定します。
  • ease(初期値)
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • step-start
  • step-end
  • steps()
  • cubic-bezier()
cubic-bezier関数を使えばオリジナルなイージングを作ることもできます。詳しくはこちらの記事を参照のこと。
transition-delayトランジション・ディレイプロパティ
変化を開始するまでの待ち時間を、秒数で指定します。
  • 0s(初期値)
  • 秒数
マイナスの値を指定すると、その分進んだ時点から変化を開始します。詳しくはマウスオーバーエフェクトのページで後述

animationプロパティ

animation-nameアニメーション・ネームプロパティ
適用したいアニメーション名を指定します。
  • none(初期値)
  • アニメーション名
アニメーション名とは@keyframes規則で定義したアニメーションの名前のこと(後述)
animation-durationアニメーション・デュレーションプロパティ
アニメーションの一回分の長さを、秒数で指定します。
  • 0s(初期値)
  • 秒数
transition-durationと同様。
animation-timing-functionアニメーション・タイミング・ファンクションプロパティ
アニメーションの仕方(イージング)を指定します。
  • ease(初期値)
  • linear
  • ease-in
  • ease-out
  • ease-in-out
  • step-start
  • step-end
  • steps()
  • cubic-bezier()
transition-timing-functionと同様。
animation-delayアニメーション・ディレイプロパティ
アニメーションを開始するまでの待ち時間を、秒数で指定します。
  • 0s(初期値)
  • 秒数
transition-delayと同様。
animation-iteration-countアニメーション・イテレーション・カウントプロパティ
アニメーションを繰り返す回数を指定します。
  • 1(初期値)
  • 回数
  • infinite
infiniteは無限にアニメーションが繰り返されます。回数を小数点以下に指定した場合は途中までアニメーションします。
animation-directionアニメーション・ディレクションプロパティ
アニメーションする方向を指定します。alternateは、偶数回めのアニメーションを逆再生にする指定。※詳しくはマウスオーバーエフェクトのページで後述
  • normal(初期値)
  • reverse
  • alternate
  • alternate-reverse
animation-play-stateアニメーション・プレイ・ステートプロパティ
アニメーションを再生させたり一時停止させたりできます。
  • running(初期値)
  • paused
animation-fill-modeアニメーション・フィル・モードプロパティ
アニメーションの前後に、スタイルをどう適用するかを指定します。※詳しくはマウスオーバーエフェクトのページで後述
  • none(初期値)
  • forwards
  • backwards
  • both

@keyframes規則キーフレームス・アットルール
以下のような書き方でキーフレームを定義します。
キーフレームとは、経過時間に対して、0%from時点〜100%to時点、その時々の要素の状態を設定したもの。動きの過程を書き記した台本みたいな感じ。
@keyframes アニメーション名 {
	from { アニメーション開始時の要素の状態 }
	50% { 50%経過した時点の要素の状態 }
	to { アニメーション終了時の要素の状態 }
}

動かすためのメモ

上で紹介した動かすプロパティを使って、いろんなエフェクトを作ってみました。ご参考まで:D