css3 animation

animationプロパティには、 name, duration, timing-function, delay, iteration-count, directionの６つのプロパティを組み合わせて指定することができます。省略された場合は初期値が入る。

@keyframesを使ったアニメーション基礎

@keyframesとはアニメーション中に到達すべきポイントであるキーフレーム（通過点）を明示することで、アニメーションの流れの中間地点を制御することを可能にします。

文字をバウンドさせるサンプル

div
	span.textbound SAMPLE

.textbound
	animation: bound 1.8s ease-in-out
	
@keyframes bound
	0%
		transform: scale(0) translate(0,-500px)
	50%
		transform: scale(2) translate(0,200px)
	70%
  		transform: scaleY(.5) translate(0,-100px)
	90%
       transform: scaleX(1.5) translate(0,50px)
	100%
       transform: scal(1) translate(0,0)

transformプロパティで使える４つのメソッド

transform: scale(.5, 2)

scale(x,y)はサイズを大きくしたり小さくしたりするメソッド、最初の値でx(左右方向)、次の値でy(上下方向)のサイズを指定。
上の例では、横幅が半分に、縦には２倍になる。

transform: translate(300px, 0px)

translate(x,y)は上下左右に動くようにするメソッド、x(左右方向)、y（上下方向）で移動する距離をピクセルで指定。

transform: rotate(360deg)

rotate()は要素を回転させるメソッド。()内に回転させる角度を記述。正の値を代入すると時計回り、負の値を代入すると反時計回りで回転する。

transform: skew(20deg, 30deg)

skew(x, y)は斜めに歪ませるメソッド。最初の値でx(左右方向)、次の値でy(上下方向)に歪ませる角度を指定。