くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[RWD][CSS3]レスポンシブデザインのサイト制作・animationで画像を動かす

今日の授業

  1. レスポンシブwebデザインのサイトの作成(テスト)
  2. CSS3のアニメーション

レスポンシブwebデザインのサイトは3時間半で完成した。期限より1時間オーバー。

レスポンシブデザインのサイト(CASA BLANCA)

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種類。