CSS3アニメーション関連のプロパティ

移行アニメーション

定義：ある状態から別の状態への要素の特定の属性の変換

幅：200ピクセル->幅：400ピクセル

遷移：遅延するプロパティの持続時間の時間移動曲線;
遷移：幅1s 0s線形
移動曲線：高速から低速緩和へのデフォルトの
均一速度低速から高速への緩やかなイーズインアウトの
デフォルト値

複数の値の遷移

transition:bgackground-color  1s  linear, width 1s linear ,height 1s linear;

transition:all 1s linear;  all关键字是浏览器自动设置所有触发的属性的过渡

変形アニメーション

2D変形

変換：変形タイプ;

翻訳する

transform:translate(x,y);
x:水平平移  +x 水平向右平移  -x水平向左平移
y:垂直平移  +y 垂直向下平移  -y垂直向上平移

回転

顺时针:+角度  deg度数 
transform:rotate(45deg);

逆时针:-角度 
transform:rotate(-45deg)

回転中心点を設定

2D変形のデフォルト変形中心は、ボックスの変形原点の中心点です：50％50％/中心中心;

transform-origin:xpx ypx / % % /right center left top bottom

スケール

transform:scale(m,n);  m代表宽度缩放倍数  n代高度的缩放倍数
m=0.5 宽度缩小为原来的一半(0.5倍)
m=2  宽度放大到原来的2倍   >1放大  <1缩小

傾きスキュー

transform:skew(x,y);  +deg向坐标轴的正方向的反方向倾斜  -deg 向坐标轴的正方向倾斜
x代表水平方向切斜的度数
y代表垂直方向倾斜的度数

3D変形

キーフレームアニメーション

1.アニメーションを定義する

@keyframes 动画名 {
//动画有几个关键状态  2个关键状态 from{}to{}
//动画有多个关键帧 n个
	0% {
	} 20% {
	} 50% {
	} 75% {
	} 100% {
	}

}

2.アニメーションを使用する

アニメーション：アニメーションの名前が遅延時間の間続くかどうか、モーションカーブの実行回数が往復かどうか、最後のフレームが完了した後のアニメーションの状態。

アニメーション名：animation-property：move;
持続時間animation-duration：5s;
遅延時間animation-delay：2s;
モーションカーブアニメーションタイミング関数：線形均一速度/ゆっくり緩める（デフォルト）/イーズイン/ ease-in-out
animation-iteration-count：2 /無限の無制限回数
往復モーションのアニメーション方向：通常は通常/代替
は、最後のフレームが完了した後に状態を反転しますanimation-fill-mode：アニメーションの最終状態を転送します最後のフレーム/バックワードの初期状態を維持（デフォルト）;
アニメーション再生状態：実行中/一時停止。