CSSアニメーションを実装してみよう
CSSアニメーションとは
CSSアニメーションは@keyframeとanimationプロパティと組み合わせることで実装できる
実際のサンプルを見てみよう
ボールが跳ねるアニメーション
@keyframe
@keyframeはアニメーションがどのように変化するかを指定できる
サンプルで書いた@keyframeは下のようなイメージ
@keyframes アニメーション名{
0%{
/*アニメーションが開始されるときのCSS*/
}
50%{
/*アニメーションの中間のCSS*/
}
100%{
/*アニメーションが終了するときのCSS*/
}
}
0%~100%以外にもfrom~toで書くことも可能
つまり下の例で言うとanimation1とanimation2は同義
@keyframes animation1{
from{
/*アニメーションを開始するときのCSSを記述*/
}
to{
/*アニメーションを終了するときのCSSを記述*/
}
}
@keyframes animation2{
0%{
/*アニメーションを開始するときのCSSを記述*/
}
100%{
/*アニメーションを終了するときのCSSを記述*/
}
}
また、@keyframeのアニメーション適用タイミングは自由
先ほどのサンプルの@keyframeを少し自由に変えてみた
少しずつ跳ねる高さを低くするアニメーションができた
animation
animationでアニメーションの秒数や回数を指定できる
サンプルで使った.ballに指定されていたanimationプロパティを1つ1つ見ていく
animation-name: animation;
animation-duration: 2s;
animation-iteration-count:infinite;
animation-name
animation-nameはアニメーションに名前をつけるプロパティ
半角英数字で任意の名前を指定し、@keyframeでその定義名に対してアニメーションの変化を指定する
animation-duration
animation-durationはアニメーションの秒数を指定するプロパティ
初期値は0sで、指定できる単位はs（秒）かms（ミリ秒）
animation-iteration-count
animation-iteration-countはアニメーションが何回ループするかを指定できるプロパティ
初期値は1回で、指定する数値の数だけアニメーションがループする
infiniteを指定すると無限にループする
animation-delay
animation-delayはアニメーションの開始を遅らせるプロパティ
初期値は0sで、指定できる単位はs（秒）かms（ミリ秒）
サンプルでは使っていなかったが、animation-delayを使うとこのようなアニメーションをすることができる
animationでまとめて指定
animationプロパティはこれらをまとめて指定することもできる
animation: animation 3s infinite 5s;
animation: 名前 アニメーションの秒数 ループの回数 開始までの秒数;
順番は特に指定はないが、先に記述した数値がdurationとなるので、durationとdelayについては順番に注意
まとめ
- CSSアニメーションは
animationと@keyframesで実装できる -
animation-nameでアニメーションの名前を定義 - 定義した
animation-nameへ@keyframesでアニメーションを指定する
他にも様々なanimationプロパティがあって、いろんな表現ができるCSSアニメーション楽しい〜
Discussion