ども、パンダを見に上野に行ったのに、シャンシャン行列に尻込みして諦めた….六崎です。

 

パンダ、大好きなんです！
家中パンダにしたいぐらいパンダ大好きなんです。
なので、パンダグッズをいっぱい買ってきました（シャンシャン、いっぱいご飯食べてね！笑

 

 

パンダ以外にもいっぱい可愛い動物さんがいて癒された1日でした。

 

 

では、前回に引き続きアニメーションのお話をしましょう。

 

cssでアニメーションをマスターしよう！

• transitionとanimationの違い
• transitionを使ってみよう ←今回はこれ
• animationを使ってみよう

 

 

前回、transitionでは「簡単なアニメーションを実装できる」と言いました。
例えば…

• ボタンやリンクにhover時、active時のアニメーションを付ける
• ハンバーガーメニューのアイコンや開閉のアニメーション
• Lightbox風なポップアップ画面（jQueryを使用せず）

 

などなど…
色んなことが簡単にできちゃうんです！

 

 

transitionのプロパティ

transition-property：transition効果を適用するCSSプロパティ名を指定する
all：全てのプロパティが変化（初期値）
none：全てのプロパティが変化しない
プロパティ名：変化させるプロパティ名のリストをカンマ区切り（ , ）で指定

 

ex. transition-property: background-color, height, width;

 

transition-duration：変化にかかる時間を指定する
時間：s（秒）またはms（ミリ秒）で指定
初期値は0s
※1ms = 1/1000sです

 

ex. transition-duration: 2s;
2秒にかけて変化させる。

 

transition-timing-function：変化のタイミング・進行割合を指定する
ease：開始と完了を滑らかにする、cubic-bezier(0.25,0.1, 0.25, 1.0)の動き（初期値）
linear：一定の速さ、cubic-bezier(0.0, 0.0, 1.0, 1.0)の動き
ease-in：ゆっくり始まる、cubic-bezier(0.43, 0, 1.0, 1.0)の動き
ease-out：ゆっくり終わる、cubic-bezier(0, 0, 0.58, 1.0)の動き
ease-in-out：ゆっくり始まってゆっくり終わる、cubic-bezier(0.42, 0, 0.58, 1.0)の動き
cubic-bezier：3次ベジェ曲線のP1とP2を（x1, y1, c2, y3）で指定

 

ex. transition-timing-function: ease-in-out;
[参考]cubic-bezier.com
↑動きの検証ができます

 

transition-delay：変化をいつ始めるか指定する
時間：s（秒）またはms（ミリ秒）で指定
初期値は0s

 

ex. transition-delay: 1s;
1秒後変化させる。

 

 

1個ずつ書いていくのが面倒という方は、まとめて書くこともOK！

 

transition：transition-propertyの値 transition-durationの値 transition-timing-functionの値 transition-delayの値
上記の順番で、各プロパティの値をスペースで区切って指定します。

 

ex. transition: all 3s ease-in 0;
ex. transition: background-color 2s linear 0, width 3s ease-in-out 0;

 

 

ブラウザによって使えるか否か調べる

基本的に、どのブラウザでももう対応しています。
古いバージョン…特にIE10以下が対応していないのご注意ください。
こういう点から昔はよく「IE爆発しろ」と言ってました（笑）

 

なので、最近のブラウザを念頭に作成しているのであればベンダープレフィックスも使わなくていいのかなーと私は思ってます。
その辺はマネージャーやマーケティングの方と応相談(●´∀｀人´∀｀○)
[参考] Can I use（transition）

 

 

実際に作ってみよう

弊社サイトのRecruitページでも使っている、カードを例に見てみましょ！

 

 

3枚のカードを配置しましたが、ホバーするとそれぞれ動き（アニメーション）が微妙に違うことに気づくと思います。

 

月のカード
ホバーすると表示が切り替わる（だけw
表に月マーク、裏に1を表示させて、z-indexで上に来る物を操作しています。
transitionやtransformを使用してないので「ペタッ！ペタッ！」と変わるだけです。

 

星カード
月カードに比べて、ちょっとカード感が出てると思います。
月カード同様に、表に星マーク、裏に3を表示させて、z-indexで上に来るものを操作しています。
ただし、そこにtransformでY軸に180°回転を0.8sで行う…って事を行なっているので「クルッ！」と回る様になっています。

 

ハートカード
星カードと比べて違いが分かりますかね？
実は、回転に奥行きを出しています！
perspectiveが奥行きの値を指定できるので、これをいじると近くで「ぴゅっ」みたいな感じから、遠くから「ブォォォン！！」みたいな感じにできたりします（擬音語多めw

 

 

transition使うか否かで月カードと星カードの違いが出てきて、もうちょい工夫するだけで星カードとハードカードの違いが出て来るんです！
すごない！？transition！！

 

ぜひ、参考にしてみてください！
ではっ