@keyframesとanimation その1
@keyframes はアニメーションの開始から終了するまで、どんな動きをするのかをするのかを指定。
例
@keyframes (animation-name（任意の名前）) {
0% {
CSSプロパティ:値;
}
100% {
CSSプロパティ:値;
}
}
animation はどのアニメーションを適用するのか、いつ開始されるのか、動作時間、繰り返し回数などを指定。
.abc {
animation-name: (animation-name（任意の名前）) ;
}
■■@keyframes関連プロパティ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
通常のcssで指定
■ 開始時widthが200px、終了時widthが300pxのアニメーションになる。
0% {
width:200px;
}
100% {
width:300px;
}
■ 半分時でwidthが400px、終了時widthが300pxのアニメーションになる。
50% {
width:400px;
}
100% {
width:300px;
}
}
■ opacity0;透明、opacity:1;不透明なども指定でき
■ 開始0%をfrom、終了100%をtoに置換することもできる。
■■animation関連のプロパティ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■■ animation-name ■■
アニメーションの名前。@keyframesで指定。
例
.section {
animation-name: （任意）;
}
■■ animation-duration ■■
アニメーションが始まって終わるまでの時間を指定。
s 1sは1秒
ms 1msは千分の1秒
例
.section {
animation-name: （任意）;
animation-duration: 3s;
}
}
■■ animation-timing-function ■■
アニメーションの進行を指定。
以下の９種類。
■ease
開始時と終了時は緩やかに変化。
■ease-in
開始時は緩やかに変化、終了に近づくと早く変化。
■ease-out
開始時は早く変化し、終了時は緩やかに変化。
■ease-in-out
開始時と終了時は、かなり緩やかに変化。
■linear
開始から終了まで一定に変化。
■step-start
開始時に最終の状態。
■step-end
終了時に最終の状態。
■steps(正数, start または end)
ステップス 指定した正数の段階で変化します。
第2引数にstartまたはendを指定。startを指定すると、開始時から変化。endを指定すると、終了時に変化。
■cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値)
変化の度合いを任意で指定します。3次ベジェ曲線で指定。
例
.section {
animation-name: （任意）;
animation-duration: 2s;
animation-timing-function: ease;
}
}
■■ animation-delay ■■
アニメーションが始まる時間を指定。
s 1sは1秒
ms 1msは千分の1秒
■■ animation-iteration-count ■■
繰り返し回数を指定。1
■■ animation-direction ■■
再生方向を指定。normal
normal 毎回、指定した通り（順方向）で再生。
reverse 毎回、逆方向から再生。
alternate 順方向、逆方向を交互に繰り返す。
alternate-reverse 逆方向、順方向のを交互に繰り返す
■■ animation-fill-mode ■■
■■ animation-play-state ■■
また、transform、transition
などなどはその2で