穴埋め式・CSS3アニメーション独習

CSS3 アニメーション クリエイティブ

HTMLコーディングする機会が減っていてコーディングスキルがあやしくなってる今日この頃です。こんにちは。
これではいかんと思い、景気付けにCSS3アニメーションでもやろうかなと思って復習がてら授業のノートを見返してたのですが、よくわからない。
ちゃんととってたつもりだったのですが、ダメですね。肝心の説明が何もメモられてなかったのであらためて調べてみました。
ノートを見ていて気づいたことは、どうやら2種類の書き方があるようです。
そして全く違っています。どっちを使ったらいいか分からないし、面倒だから簡単な方で統一できないのかなあと頑張って調べたのですが、やはりスタートのタイミングで異なるようです。
大きく分けて次の二つになりました。

  1. ページを読み込んだときに自動的にアニメーションがスタートする
  2. マウスオーバーや、クリックでアニメーションがスタートする

では、一つづつ見ていきましょう

1. ページを読み込んだときに自動的にアニメーションがスタートする場合

必要なのは以下の書式。忘れちゃってもすぐわかるようなテンプレートになるように穴埋め式にしてみました。

セレクタ{
	アニメーションさせる予定のプロパティ: 値0;
	animation-name: (                   );
	animation-duration: (                   );
	animation-timing-function: (                   );
	animation-iteration-count: (                   );
	animation-direction:  (                   );
	animation-delay: (                   );
}

@keyframes (animation-nameの値) {
	0%{アニメーションさせるプロパティ: 値1; }
	100%{アニメーションさせるプロパティ: 値2; }
}

※これにベンダープレフィクスありものも同時に作ります。

	-moz-animation-name: (                   );
	-webkit-animation-name: (                   );
	-o-animation-name: (                   );
	-ms-animation-name: (                   );
		(以下略)

アニメーションしたいセレクタに、装飾用のCSSプロパティ以外にアニメーションのプロパティを追加します。
そして、その後にキーフレーム( @keyframe )を記述します。
Flashとか使ったことあると分かりやすいかもですね。ぼくはすっかり忘れましたが。
キーフレームとは?
ムービーでも、パラパラマンガでもいいんですけど、たくさんのコマ(絵や画像)が切り替わることによって絵が動くように見えますよね?コマのことをフレームとも呼びます。
CSS3アニメーションの場合、すべてのコマがあるわけではなくて、基準になるコマ(キーフレーム)があってその間の動きはその場で作られていきます。(多分)その基準のコマを@keyframesで定義します。
はじめと終わりや動きが変わる瞬間にどんな状態かを指定します。
パラパラ漫画のように全てののコマが必要なわけでなく。始めと終わりコマ(キーフレーム)を決めて、その間にどんな動きをするかを決めるとその通りに動いてくれます。
動きを変化させる起点が増えると、その分、キーフレームの数が増えます。
上の例だと、「値0」だったものがアニメーションが始まった時にぱっと「値1」になって、100%になるにつれて、「値2」に変化します。そしてアニメーションが終わると「値0」に戻ります。
空欄じゃ何を入れたらいいのかわからないですよね。
では、それぞれのプロパディを見ていきましょう。

ないと動かないアニメーション必須のプロパティ

animation-name … セレクタとキーフレームを結びつけるために必要です。複数のアニメーションを作る場合、同じ名前を使わないように注意した方がいいかもしれません。。
animation-duration … 1回のアニメーションの時間の長さ。初期設定が0。なので設定しないと動きません。数字に秒を表す「s」が必要。
ex. 1s, 2s, 10s, etc…

この二つの値を正しく設定さえすれば動きます。

なくても大丈夫。細かい設定をするオプション的なプロパティ

animation-timing-function … 初期設定はease。
animation-iteration-count … アニメーションを何回再生するか。止めないでずっと動かし続けることもできます。(infiniteに設定)
ex. 1, 2, 3…., inifinite
animation-direction … 複数回目のアニメーションの向きを指定。初期設定はnormal(同じ向き)。反対にする場合は、alternate

animation-play-state
animation-delay … アニメーションが始まる時間をずらせる。何秒ずらすか、数字に秒を表す「s」が必要。
ex. 1s, 2s, 10s, etc…

セレクタはショートハンドでも書けます。学校時代のノートにはショートハンドしか書いてなくて、値が何を指してるのか分からなかったのですよね。
セレクタ{
アニメーションさせるプロパティ: 値0;
animation:(値1 値2 値3 値4 値5…);
}
時間を表す値が2つありますが、最初に出てきたほうを、animation-durationと認識してくれるみたいです。

おまけ:ここに苦戦しました。

いつもはコーディング中のプレビューはSafariを使っているのですが、スマートフォンのシミュレーションをしたくてChromeでプレビュー確認していました。
さあ、できたとアップロードしてサンプルページにアクセスしたらアニメーションが動きませんでした。当然、iPhoneも。
ChromeとFirefoxは問題なく動いていたのですがこのままお蔵入りかと焦りましたよ。
調べたらSfariの場合、「@keyframes」にもベンダー・プレフィクスが必要らしいです。
「@-webkit-keyframes」にしたら動きました。このエントリーがお蔵入りにならずにホッとしました。

2. マウスオーバーや、プレス(クリックしたまま)でアニメーションがスタートする

マウスオーバーとクリックは、セレクタの擬似クラスが違うだけなのでひとつにまとめちゃいました。
マウスオーバー(もしくはクリック)した時にアニメーションさせるためには、時間変化をコントロールするプロパティを使います。
transitionプロパティでまとめてショートハンドでも書けますが一つ一つ調べてみましょう。
これも穴埋め式にしてみました。

セレクタ{
	プロパティ:値(変化する前)
	transition-property:  (                 );
	transition-duration:  (                 );
	transition-timing-function:  (                 );
	transition-delay:  (                 );
}

セレクタ:hover{
	マウスオーバーした時に変化させたいプロパティ:(変化した後の値);
}

/*もしくは*/
セレクタ:active{
ボタンプレスした時に変化させたいプロパティ:(変化した後の値);
}

ショートハンドで書く場合

セレクタ{
プロパティ:値(変化する前)
transition:  値1, 値2, 値3, 値4;
}

セレクタ:hover{
マウスオーバーした時に変化させたいプロパティ:(変化した後の値);
}

まず、アニメーションさせたいセレクタにtrasitionのプロパティを追加します。
次に、マウスオーバー(もしくはクリック)した時のセレクタに
変化した後のプロパティを記述します。

アニメーションするために必須のプロパティ:
transition-property:変化させたいプロパティを指定。複数ある場合は 「,」で区切る。必須です。
transition-duration:変化にかかる時間。数字に単位「s」をつけます。初期値は0。つまり設定しないと普通の:hoverや、:activeと変わりません。なので必須ですね。

なくても動くオプション的なプロパティ:
transition-timing-function:アニメーションのスピードの変化のタイミング・進行割合を指定します。初期値はease。
入力できる値は、
ease:開始と完了を滑らかにする(初期値)
linear:一定の速さ
ease-in:ゆっくり始まる
ease-out:ゆっくり終わる
ease-in-out:ゆっくり始まってゆっくり終わる
cubic-bezier(数値, 数値, 数値, 数値) くわしくは知りたい方はこちらで調べてね。
transition-delay:アニメーションが始まるまでの時間。単位「s」。初期設定は0。

こちらの特徴は、マウスオーバーしたままだと、変化した後の状態を保っていることですね。
マウスアウトすると前の状態にすぐに戻ってしまいます。

サンプル

一応サンプルを用意してみました。1と2でアニメーションの動きは同じにしてあります。
気になったらコードを見てみてください。スマートフォンでは1だけで2は動かないみたいです。

サンプル
fig. 1
PCは問題ないんですけど、スマートフォンで2番めのが、マウスオーバーも、プレスのも動かないので、今後の課題にしておきます。
覚えられるまでは、このブログをコピーして使おうと思います。

コメント