[RWD][CSS3]レスポンシブデザインのサイト制作・animationで画像を動かす
今日の授業
- レスポンシブwebデザインのサイトの作成(テスト)
- CSS3のアニメーション
レスポンシブwebデザインのサイトは3時間半で完成した。期限より1時間オーバー。
CSS3のアニメーション
アニメーションのショートハンド
animation-name: anime1; /*必須!キーフレーム名*/ animation-duration: 2s; 1 回のアニメーション周期が完了するまでの所要時間 animation-timing-function: ease; animation-delay: 2s; animation-iteration-count: 1; animation-direction: alternate; /*100%まできたときに逆再生する*/
- animation-name
キーフレーム名。必須。 そもそもこれをつけないと動かせない。
- animation-duration
アニメーション一回分の時間の長さ。5秒なら「5s」。初期値は0。
- animation-timing-function
アニメーションのタイミング・進行割合を指定する。
主にease、linear、ease-in、ease-out、ease-in-outなどのいずれかのキーワードを指定する(値は他にもいろいろある)。
初期値はease
http://memopad.bitter.jp/w3c/cssref/playit.php?filename=playcss_animation-timing-function&preval=linear
- animation-delay
アニメーションの開始を遅らせる時間を指定する
初期値は0
- animation-iteration-count
アニメーションの繰り返し回数を指定する。
初期値は1。「infinite」を指定すると、無限に繰り返す。
- animation-direction
アニメーションを交互に反転再生させるかどうかを指定する。
値にalternateを指定すると、 奇数回では普通方向の再生、偶数回では逆方向の再生となって、アニメーションサイクルを繰り返す。
以上を踏まえて制作したアニメーション2種類。