基礎から学ぶCSS3で作るギミック、アニメーション transform transition animation編

投稿日時:2014年4月21日 カテゴリー:CSS

目次

初めに

このブログは、css3 で実装されたアニメーションを直感的に理解しマスターできるように作成しました。
なので、細かい説明、パラメータは省きます。
css3 のアニメーションで何ができるかを学んでいただければ。

css3で追加されたさまざまなプロパティ

ブラウザの世界では、今まではjavascript(Jquery) Flash などでアニメーションを実現してきた。
それが、人類の限界と思われていた、、、が、、、、、、、、
確かにある。

css でアニメーションを実現できる方法が。
最初は私も混乱しましたよ。
何せ、css3で追加されたアニメーションに深くかかわるプロパティが複数あんですから。

いや、基礎的な要素もアニメーションに欠かせませんよ。
でも、いろいろあると言っても、やはり css3 で追加された

transform
形を操る。歪み、移動、回転など。
transition
動きを与える。Transform と組み合わせて、無限の力を得る。
animation
賢者の石。Transitionよりもさらに詳細に動きを制御する。

の三つが肝でしょな。

transform

「transform」は変身なんです。
以下を見てもらえば容易に理解できます。

  • オリジナル

    img10

    オリジナルです。

  • transform:scale(0.5)

    img10

    scale は縮小/拡大です。

  • transform:translate(20px)

    img10

    translate は移動です。

  • transform:rotate(45deg)

    img10

    rotate は回転です。

  • transform:skew(45deg)

    img10

    skew は傾斜です。

これは簡単なのですぐにわかりますね!!
また、重要なのが transform-origin です。

transform-origin

transform-originは、とらんすふぉーーむの軸の中心を決めます。

transform-origin 説明

おい、変形はわかるよ、でもアニメーションじゃないよ!!と思った方、まだまだ甘い。
甘すぎるわ甘ちゃんが!!!!!!!!!!!!!!!!!!!!

ごめんなさい!!嘘です。離脱しないでください。

transition

これこそアニメーションに欠かせない、指定時間で動きを与えるものです。
transition はよくボタンや画像に動きを与えたい時に使用されます。

transition の How to use  だ!!

transition “変化するプロパティ” “変化にかかる時間(s)” “変化の具合” “変化のスタート時間(s)”
-webkit-transition “変化するプロパティ” “変化にかかる時間(s)” “変化の具合” “変化のスタート時間(s)”

ちなみに、-webkit- は Google Chrome、Safari 向けの設定です。

まずは、簡単なやつから。

マウスオーバー時(:hover)に赤から青に

「Transition “背景色を” “3秒かけて” “一定間隔で” “1秒後”」
にマウスオーバー時(:hover)に赤から青にさせたい場合。

transition “背景色を” “3秒かけて” “一定間隔で” “1秒後”

※マウスオーバーしてください。(1秒後の色が変化)

.bg_chang{

background-color: #F00;/*赤色*/
transition: background-color 3s linear 1s;
-webkit-transition: background-color 3s linear 1s;
}

.bg_chang:hover{

background-color: #00F;/*青色*/

}

ちなみに、マウスオーバーの呪縛から解き放つと、
逆のアニメーションで元に戻る。
非常に重要だから2回言う「逆のアニメーションで元に戻る」。

マウスオーバー時(:hover)300px から 400px

「transition “横幅を” “3秒かけて” “開始と完了を滑らかーに” “now実行”」
をマウスオーバー時(:hover)300px から 400px にさせたい場合。

transition “横幅を” “3秒かけて” “一定間隔で” “now”

※マウスオーバーしてください。(横幅が変化)

.width_chang{

width: 300px;/*変化前*/

transition: width 3s ease ;
-webkit-transition: width 3s ease ; /*now はデフォルトなので省略*/

}

.width_chang:hover{

width: 400px;/*変化後*/

}

では、上記2つを同時にさせたい場合は、

Transition の複数指定

「合体!!!!」

一万年と二千年前から愛してる ~♪
八千年、、、、

!?

コンマ(,)で区切りましょう。

transition “背景色と横幅” “3秒かけて” “一定間隔で” “now”

※マウスオーバーしてください。

.all_of_the_world{

width: 300px;/*変化前*/

background-color: #F00;/*赤色*/
transition: background-color 3s ease,width 3s ease;
-webkit-transition: background-color 3s ease,width 3s ease;

}

.all_of_the_world:hover{

width: 400px;/*変化後*/
background-color: #00F;/*青色*/

}

transition と transform を使う

transition(指定時間で transform(形) を変化させる。)

ゴー ゴーゴーゴー

「やべー、やばすぎる!!!!」
「催眠術だとか超スピードだとかそんなチャチなもんじゃあ 断じてねえ!!」
「もっと恐ろしいものの片鱗を 味わったぜ…」

動く

css3

※マウスオーバーしてください。

.move{
	transition:transform 3s;		
	-webkit-transition:-webkit-transform 3s;		
}

.move:hover{
	transform: translate(200px);		
	-webkit-transform: translate(200px);		
}

回る

css3

※マウスオーバーしてください。

.spin{
	transition:transform 3s;		
	-webkit-transition:-webkit-transform 3s;		
}

.spin:hover{
	transform: rotate(720deg);		
	-webkit-transform: rotate(720deg);		
}

「勝てる!!!」
「相手がどんなヤツであろうと負けるはずがない!!!」
「俺はいま、究極のパワーを手に入れたのだーーーーーっ!!!」

animation

transition と transform の合体にて最強の力を手に入れたと思った ピッコr、、 。
しかし、transition よりもさらに複雑な動きを再現できるフリーz、、 animation が立ちはだかるのであった。

まず、以下を見てほしい。
これが、animation の使い方だ。

.class{
animation “keyframes 名前” “時間(s)” “変化の具合” “変化のスタート時間(s)” “繰り返す回数” “繰り返す方法”
}
@keyframes 名前{
変化1/*A1 */
変化2/*A2 */
変化3/*A3 */
}

設定項目が多いが、名前で設定した赤い部分の動き黄色い部分で制御する。

A1からA2へそしてA3へ
No 名前 動作
1 “時間(s)” A1→A2→A3の実行時間 3秒かけて A1→A2→A3 を実行
2 “変化の具合” A1→A2→A3の変化の度合い 最初と最後を早く A1→A2→A3 を実行
3 “変化のスタート時間(s)” A1の実行を何秒後に始めるか いつはじめるの?今ではありません、10秒後です。
4 “繰り返す回数” X回繰り返します。 A1からA3を 4回繰り返しなさい
5 “繰り返す方法” A1からA3 をどのように繰り返しますか? “A1→A2→A3 A1→A2→A3(繰り返し式)” や “A1→A2→A3→A1→A2(振り子式)“
繰り返しでしょうか、いいえ振り子です。

ちなみに、アニメーションが終了すると変化前の状態にアニメーションなしで戻る。
非常に重要だから2回言う「変化前の状態にアニメーションなしで戻る」。

animation基礎編

要素を大きくする

Flash でおなじみ、要素を大きくするを 3回実行

css3

ボタンを押せ

.an_scale{
	animation:move 3s ease 0s 3 normal;		
	-webkit-animation:move 3s ease 0s 3 normal;		

}

@keyframes move {
	from {
		transform: scale(0);
	}
	to {
		transform: scale(1);
	}
}

@-webkit-keyframes move {
	from {
		-webkit-transform: scale(0);
	}
	to {
		-webkit-transform: scale(1);
	}
}

回数の変化

繰り返す回数を “infinite” にすれば無限になる。

css3

.an_spin{
	animation:spin 3s linear 0s infinite normal;		
	-webkit-animation:spin 3s linear 0s infinite normal;		
}

@keyframes spin {
	from {
	transform: rotate(0deg);
	}
	to {
	transform: rotate(360deg);
	}
}
@-webkit-keyframes spin {
	from {
	-webkit-transform: rotate(0deg);
	}
	to {
	-webkit-transform: rotate(360deg);
	}
}

繰り返す方法の変化

繰り返す方法の変化については、デモを見てもらえば一番わかる。

css3

.an_spin_f{
	animation:spin_f 3s linear 0s infinite alternate;	
	-webkit-animation:spin_f 3s linear 0s infinite alternate;		
}



@keyframes spin_f {
	from {
	transform: rotate(0deg);
	}
	to {
	transform: rotate(360deg);
	}
}

@-webkit-keyframes spin_f {
	from {
	-webkit-transform: rotate(0deg);
	}
	to {
	-webkit-transform: rotate(360deg);
	}
}

animation応用編

Fadein

よく使われる fadein 、しかしその実態を理解するものは多い。

fadein

「なん、、、だと」落ち着け、まだ人類が敗北したわけではない。
現状を把握してスピーディーに解決しよう。

まず動作を分解するんだ!!

1) 画像は横にスライドする。
これは、css のtransform のtranslate で実現可能だ!!
2) 画像が徐々に実体化する。
これは css のopacity で実現可能だ。

は!!
この 2つを組み合わせてはどうだろうか??

やっと完成が見えてきたぜ!!
俺、このコード書き終えたら結婚するんだ!!

.fadein_prt{
	animation:fadein_prt 1s linear 0s 1 alternate;
	-webkit-animation:fadein_prt 1s linear 0s 1 alternate;
}

@keyframes fadein_prt {
	from {
	transform: translate(0px);
	opacity:0;
	}
	to {
	transform: translate(100px);
	opacity:1;
	}
}

@-webkit-keyframes fadein_prt {
	from {
	-webkit-transform: translate(0px);
	opacity:0;
	}
	to {
	-webkit-transform: translate(100px);
	opacity:1;
	}
}

完璧だ!!
もはや、検証する必要もないが念のため。

css3

ボタンを押せ

ぐは、変だ、説明できないけど何かがおかしい。
マリア、すまな、、、い。

茶番はいいよ!!

animation の法則によりFadein 後、画像は元の位置に戻る。ならば、マイナス位置から元の位置に
fadein すれば元の位置はFadein 後の位置と同じになる。

css3

ボタンを押せ

.fadein{
	animation:fadein 1s linear 0s 1;		
	-webkit-animation:fadein 1s linear 0s 1;		
}

@keyframes fadein {
	from {
	transform: translate(-100px);
	opacity:0;
	}
	to {
	transform: translate(0);
	opacity:1;
	}
}


@-webkit-keyframes fadein {
	from {
	-webkit-transform: translate(-100px);
	opacity:0;
	}
	to {
	-webkit-transform: translate(0);
	opacity:1;
	}
}

振り子

よし動作の分解だ、、、といっても一定間隔で画像を回転させるだけ。
これは、transform rotate で実現可能だ
だが、気をつけなければいけない、振り子の始点は画像の中心(デフォルト)ではない。
始点の変更は、transform-origin で実現可能だ。

俺、このコードできたら結婚、、、、

もういい!!

振り子

振り子

.furiko{
	transform-origin:50% 0%;/* 振り子の視点を(画像上部(y:0)の中心(x:50%))  */
	animation:furiko 0.8s linear 0s infinite alternate;
	-webkit-transform-origin:50% 0%;
	-webkit-animation:furiko 0.8s linear 0s infinite alternate;
}

@keyframes furiko {
	from {
	transform: rotate(60deg);
	}
	to {
	transform: rotate(-60deg);
	}
}

@-webkit-keyframes furiko {
	from {
	-webkit-transform: rotate(60deg);
	}
	to {
	-webkit-transform: rotate(-60deg);
	}
}

落下して回転

最後はちょっと複雑だ。要素の分解だけじゃ理解できない。
図だ!!図を描くんだ!!

落下して転がる設計図

後は、お好みで回転を加えれば完成だ。

.drop{
	animation:drop 3s linear 0s 1;
	transform: rotate(45deg);
	-webkit-animation:drop 3s linear 0s 1;
	-webkit-transform: rotate(45deg);

}

@keyframes drop{

	0% {
		transform: translate(-200px,-100px);/* 落下位置上部 */
	}

	15% {
		transform: translate(-200px,0px) rotate(0deg);/* 落下地点 */
	}
	
	35% {
		transform: translate(-150px,-20px) rotate(90deg);	/* ワンバン頂点 */
	}

	55% {
		transform: translate(-100px,0px) rotate(180deg);	/* ワンバン着地点 */
	}
	
	100%{
		transform: translate(0px,0px) rotate(405deg);	/* 終点 */			
	}
}

@-webkit-keyframes drop{

	0% {
		-webkit-transform: translate(-200px,-100px);/* 落下位置上部 */
	}

	15% {
		-webkit-transform: translate(-200px,0px) rotate(0deg);/* 落下地点 */
	}
	
	35% {
		-webkit-transform: translate(-150px,-20px) rotate(90deg);	/* ワンバン頂点 */
	}

	55% {
		-webkit-transform: translate(-100px,0px) rotate(180deg);	/* ワンバン着地点 */
	}
	
	100%{
		-webkit-transform: translate(0px,0px) rotate(405deg);	/* 終点 */
	}
}

IE と safri だと期待通りの動作をしない。help me!!

バウンドが放物線ではく、なめらかではない。
rotate() と transform-origin を組み合わせれば放物線を描く、
真に驚くべき方法を見つけたが、このサイトはそれを書くには狭すぎる。

いかがでしたか?
今回説明した、プロパティ を使えば、さらに複雑なアニメーションが作れます。
jQuery 等とも組み合わせて、アニメーションやギミックを使って楽しいサイトを作ってください。

最後に

ここまで、読んでいただいた方がはたしているのだろうか?
最後まで読んでいただいた方、本当にありがとう。
また、このページをアップするためにいろいろ調べ物をしたり、文章の構成を考えた自分自身に深く感謝し尊敬する。


コメント一覧

  1. shoco より:

    最近webクリエーターがっこうwに通いはじめ、先取りして独学でcss3を勉強しようと思っていろいろサイトみてたのですが、一番分かりやすくて面白かったです。このページ全プリントしました。ありがとうございました。ウツになっているという記事も拝見したので、一言お礼をと思い、コメントしました。私もいつか独立できたらと思っているので、またチラチラブログ拝見して、励みにさせていただきます。

    1. admin より:

      ありがとうございます。
      独立は簡単ではないと思いますが、頑張ってください。
      応援しています。

コメントを残す