フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(CSS)CSS animationの基本

CSSでアニメーションを表現するためのプロパティにanimationがあります。現段階(2015年10月)ではworking draftになっておりますが一応、基本的な使用方法を残しておきます。

CSS animation は、アニメーション開始時のスタイルと終了時のスタイルを指定して、スタイルが変わる様子をアニメーションで表示します。開始時と終了時のスタイルはfromとtoで指定できます。また、0%から100%の間で細かく指定することもできます。これらの設定は@keyframeプロパティに名前を付けて行います。

@keyframes animationName {
	0%{width:0px;}
	50%{width:100px;}
	100%{width:120px;}
}

上記のように設定したキーフレームの名前(上記サンプルの場合は「animationName」)をHtmlのスタイルに設定することでアニメーションが適用されます。アニメーションの機能にはいろいろなプロパティがありますが、最低限必要なのはanimation-nameanimation-durationです。animation-durationにはアニメーション開始から終了までの時間を指定します。単位はs(秒)かms(ミリ秒)です。

div {
    animation-name: animationName;
    animation-duration: 300ms;
}
基本的なプロパティ
animation-name
適用するキーフレームを名前で指定します
animation-delay
読み込みからアニメーション開始までの待機時間を指定します。単位はs(秒)かms(ミリ秒)です。
animation-duration
一回のアニメーションにかける時間を指定します。単位はs(秒)かms(ミリ秒)です。
animation-direction
アニメーションの流れを指定します。値は以下の定数で指定します。デフォルトはnormalです。
● normal
@keyframeの0%から始まって100%で終了します
● reverse
normalとは逆に@keyframeの100%から始まり0%で終了します
● alternate
@keyframeの0%から始まり、100%を経由して再び0%に戻って終了します
animation-iteration-count
繰り返し回数を指定します。値は数値か定数のinfinite(無限)で指定します。
animation-timing-function
イージングの設定を行います。値は以下の定数で指定します。デフォルトはeaseです。
● ease
linearと同じスピードで開始し、途中で加速した後、減速して終了します。
● linear
常に一定のスピードで変化します。
● ease-in
開始時は遅く、だんだん加速していきます
ease-out
開始時は早く、だんだん減速していきます
ease-in-out
開始時と終了時は遅いが、途中で加速します
animation-fill-mode
アニメーションが終了した後のスタイルを指定します。
● none
アニメーション終了後には本来要素が持っていたスタイルに戻ります
● forwards
アニメーション終了時のスタイルが適用されます
● backwards
アニメーション開始時のスタイルが適用されます
イベント
animationを設定した要素は、アニメーションの開始時、終了時、繰り返し次にイベントが発生します。addEventListenerで指定する際のイベント名は以下の通りです。
アニメーション開始時 animationstart
アニメーション終了時 animationend
繰り返しの際、アニメーションが最初に戻った時 animationiteration