CSS3を使用してトランジションとアニメーション効果を実現する

div {
  変換: translate(50px,100px);
  -webkit-transform: translate(50px,100px); /* Safari と Chrome */
}

div {
  変換: 回転(30度);
  -webkit-transform: rotate(30deg); /* Safari と Chrome */
}

div {
    -webkit-transform: scale(2,3); /* Safari /
    transform: scale(2,3); / 標準構文*/
}

div {
    変換: skew(30deg,20deg);
    -ms-transform:skew(30deg,20deg); /* IE 9 /
    -webkit-transform: skew(30deg,20deg); / Safari および Chrome */
}

 translate3d(x,y,z) は 3D 変換を定義します。
translateX(x)は、X軸の値のみを使用して3D変換を定義します。
translateY(y) は、Y 軸の値のみを使用して 3D 変換を定義します。
translateZ(z) は、Z 軸の値のみを使用して 3D 変換を定義します。
scale3d(x,y,z) は 3D スケーリング変換を定義します。
scaleX(x) は、x 軸に沿った値を指定して 3D スケーリング変換を定義します。
scaleY(y) は、Y 軸に沿った値を指定して 3D スケーリング変換を定義します。
scaleZ(z) は、z 軸に沿った値を指定して 3D スケーリング変換を定義します。
rotate3d(x,y,z,angle) は 3D 回転を定義します。
rotateX(angle) は、X 軸を中心とした 3D 回転を定義します。
rotateY(angle) は、Y 軸を中心とした 3D 回転を定義します。
rotateZ(angle) は、Z 軸を中心とした 3D 回転を定義します。
perspective(n) 3D 変換された要素の透視ビューを定義します。

transition ショートハンド プロパティ。1 つのプロパティで 4 つの transition プロパティを設定するために使用されます。
transition-property トランジションが適用される CSS プロパティの名前を指定します。
transition-duration は、遷移効果にかかる時間を定義します。デフォルトは0です。遷移期間: 5秒;
transition-timing-function は、トランジション効果のタイミング カーブを指定します。デフォルトは「ease」です。
    linear は、同じ速度で開始および終了する遷移効果を指定します (cubic-bezier(0,0,1,1) に相当)。
    easy は、ゆっくり始まり、その後加速し、そしてゆっくり終わる遷移効果を指定します (cubic-bezier(0.25,0.1,0.25,1))。
    easy-in は、ゆっくり始まる遷移効果を指定します (cubic-bezier(0.42,0,1,1) に相当)。
    easy-out は、ゆっくり終了する遷移効果を指定します (cubic-bezier(0,0,0.58,1) に相当)。
    easy-in-out は、ゆっくりと開始および終了する遷移効果を指定します (cubic-bezier(0.42,0,0.58,1) に相当)。
    cubic-bezier(n,n,n,n) は、cubic-bezier 関数で独自の値を定義します。可能な値は0から1までの数値です。
transition-delay は、遷移効果がいつ開始するかを指定します。デフォルトは0です。遷移遅延: 2秒;

@keyframes はアニメーションを指定します。    
animation は、animation-play-state プロパティを除くすべてのアニメーション プロパティのショートカット プロパティです。    
animation-name は、@keyframes アニメーションの名前を指定します。    
animation-duration は、アニメーションが 1 サイクルを完了するのにかかる秒数またはミリ秒数を指定します。デフォルトは0です。    
animation-timing-function は、アニメーションの速度曲線を指定します。デフォルトは「ease」です。    
animation-fill-mode は、アニメーションが再生されていないとき (アニメーションが完了したとき、またはアニメーションの再生が開始されない遅延があるとき) に要素に適用するスタイルを指定します。    
animation-delay はアニメーションがいつ開始するかを指定します。デフォルトは0です。    
animation-iteration-count はアニメーションを再生する回数を指定します。デフォルトは 1 です。
animation-direction は、次のサイクルでアニメーションを逆方向に再生するかどうかを指定します。デフォルトは「通常」です。
animation-play-state は、アニメーションが実行中か一時停止中かを指定します。デフォルトは「実行中」です。