2014.09.02 [火] 特別授業「CSS3 Animation」
夏休みも残りわずかとなり、暑さもずいぶんと和らいできました。そんな中、特別授業ということで初心者向けにCSS3のAnimationの授業を行いました。
初心者向けといいながら、かなりイレギュラーな部分を題材にしたのですが、資料としていろいろとまとめましたので、書いておこうと思います。
まずは、HTML, CSS, JavaScriptの役割と、HTMLの書き方とCSSとの関係を理解してもらいます。
ここ1年ぐらい、高校生や初心者向けの講座では、CodePenを利用しています。
アプリケーションの使い方やファイルの設定など、コーディングすること以外の準備が必要なくjQueryなどライブラリの読み込みも簡単に設定ができ、コードを書き換えると自動でリロードもしてくれます。今回も最初からCodePenで書いていきます。
CSSでは、HTMLのタグとセレクタの関係、クラスで個別に設定ができるという事を説明します。Green
Blue
Red
p{
font-size: 50px;
font-weignt: bold;
}
.green {
color: green;
}
.blue......
書き込むとすぐに、文字の大きさが変わったり、各単語に色が塗り分けられたりと、関係性がわかりやすいと思います。
さて、ここからHTMLの文字にCSSでアニメーションをつけていきます。
あまり調べてなかったのですが、CSS3のアニメーションでは、意外と設定次第でいろいろな事ができるようです。
参考：Animate.css Just-add-water CSS animations
CSSアニメーション
比較的簡単な、「Slide Up」「Slide Down」「Fade In」「Bounce」を作りながら各プロパティと動きの説明し、プロジェクターで投影しながら一緒にコーディングして動かしていきます。最終的には、テキストを画像に換えて、ボタンで動くようにしました。
See the Pen oJkjK by tridentwebdesign (@tridentwebdesign) on CodePen.
キャラクターはFirefoxのマスコットキャラクター「フォクすけ」を利用させてもらいました。
今回は「Bounce（バウンド）」で説明します。
最初に、HTMLを書きます。classも設定しておきます。
そしてCSSは、アニメーションの設定をします。Bounce
.bounce{
visibility: visible;
animation-name: bounce;
-webkit-animation-name: bounce;
animation-duration: 1.6s;
-webkit-animation-duration: 1.6s;
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
}
要素（テキスト）が動きますので、動いた場所に他の要素が入ってこないようにvisivility : visibleを設定します。次に
- アニメーションの名前 animation-name
- アニメーション一回の時間 animation-duration
- アニメーションのタイミング・進行の動き animation-timing-function
- 要素の基準点 transform-origin
animation-timing-function
始点と終点間の変化の仕方を調整する事ができます。これを一般的には、イージングとよびアニメーション作成ソフトでは、ベジェ曲線で表されます。以下の図のような4つのコントロールポイント（P0、P1、P2、P3）で定義されます。
P0は始点、P3は終点なので固定となりますので、P1のX1,Y1、P2のX2,Y2を設定する事で、変化の仕方を変更する事ができます。細かい設定は、下記の記事に紹介されているジェネレーターを利用すると便利です。
参考：【便利】timing-functionのシミュレーター｜しばさんのおはなし
一般的な変化の仕方については、下記の値が準備されています。
| 値 | 説 明 |
|---|---|
| ease | cubic-bezier(0.25, 0.1, 0.25, 1) に等しい関数です。 |
| linear | cubic-bezier(0, 0, 1, 1) に等しい関数です。 |
| ease-in | cubic-bezier(0.42, 0, 1, 1) に等しい関数です。 |
| ease-out | cubic-bezier(0, 0, 0.58, 1) に等しい関数です。 |
| ease-in-out | cubic-bezier(0.42, 0, 0.58, 1) に等しい関数です。 |
| step-start | steps(1, start) に等しい関数です。 |
| step-end | steps(1, end) に等しい関数です。 |
| steps(数値, [，start | end ] ) | ２つのパラメータでステップ関数を指定します。 |
| cubic-bezier(数値, 数値, 数値, 数値) | ３次ベジェ曲線（cubic-bezier）を指定します。 数値は曲線パラメータ２点の座標で (x1, y1, x2, y2) です。 |
transform-origin
要素の変形の原点を指定します。指定の方法は、変形前の要素の左上位置（0,0）から右下方向への距離をパーセント（X%, Y%）、距離（X, Y）、もしくはキーワード（水平方向〔left・center・right〕垂直方向〔top・center・bottom〕）で指定します。
中心の下を動かして上に延びるようにしたかったので（50%, 100%）に設定しました。
続けて、animation-name: bounceのキーフレームを設定します。キーフレームとは時間上のあるポイントをマークしたもので、そのポイントでの空間上の位置や、不透明度、オーディオボリュームなどの値を指定します。CSSでは、パーセントで定義します。
@keyframes bounce {
0% {
transform: translateY(0%) scaleY(0.6);
}
60%{
transform: translateY(-100%) scaleY(1.1);
}
70%{
transform: translateY(0%) scaleY(0.95) scaleX(1.05);
}
80%{
transform: translateY(0%) scaleY(1.05) scaleX(1);
}
90%{
transform: translateY(0%) scaleY(0.95) scaleX(1);
}
100%{
transform: translateY(0%) scaleY(1) scaleX(1);
}
}
transform:translate() で、移動する方向（XorY）と距離を設定します。
transform:scale() で要素の拡大する方向（XorY）と割合を設定します。バウンドするアニメーションになりますので、縮んでから伸びて着地でまた、縮むように要素の大きさや移動を調整します。こちらも@keyframesのジェネレーターなんかもありますので、複雑な動きなどはこちらで確認するといいでしょう。
ベンダープレフィックスを入れる事で、一部対応のブラウザでも表示する事ができます。
@-webkit-keyframes bounce {
0% {
-webkit-transform: translateY(0%) scaleY(0.6);
}
60%{
-webkit-transform: translateY(-100%) scaleY(1.1);
}
70%{
-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
}
80%{
-webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
}
90%{
-webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
}
100%{
-webkit-transform: translateY(0%) scaleY(1) scaleX(1);
}
}
bounceの文字を画像に変えて、簡単なJavaScriptでクリックイベントにして終了です。
さて、今回、アニメーションの設定をしてると気になった事が、CSSの小数点は何桁まで認識されるのでしょうか？
とGoogle先生に聞いてみたら、しっかりと調べられている方がいらっしゃいました。
CSS の小数点以下の数値を各ブラウザはどのように解釈するか | Unformed Building
かなり細かい設定まで可能のようです。 ということは、その気になれば超大作アニメーションも。。。
