CSSアニメーションを学ぶその1

こんにちは、basyouです。
最近CSSのアニメーションについて学習をしたので、メモ代わりとしてここに記述していこうと思います。

アニメーションは実際にコードを書いて動きを見ないと実感が沸きにくいので、手を動かすことを強くおすすめします。
では早速取り掛かりましょう。

## 取り扱うこと

・transformプロパティ
・transitionプロパティ

## transformプロパティ

transformプロパティは要素の変形をしてくれます。

// translete(), translateX(), translateY()   //要素の移動
.hoge {
 transform: translate(5px, 5px);  //右に5px、下に5px移動する
}


scale(), scaleX(), scaleY()   //要素の大きさ変更
.hoge {
 transform: scale(0.5, 0.5);  //X軸に0.5倍、Y軸に0.5倍の変形をする
}


rotate(), rotateX(), rotateY()   //要素の回転
.hoge {
 transform: rotate(45deg);  //時計回りに45度回転する　-値なら反時計回り
}

skew(), skewX(), skewY(),   //要素の傾斜
.hoge {
 transform: skew(5deg, 5deg);  //X軸方向に5度、Y軸方向に5度回転する
}

()Xのように軸を指定すると、その指定した軸だけに変更を適用することができます。
軸を指定しなかった場合は、X軸、Y軸の順に変形させたい値を入力します。
ちなみにtranslate(-5px, -5px)というように負の数を渡しても大丈夫です。
この場合は 左に5px、上に5px移動します。

これらの変形の基準点は、デフォルトだと要素の中央に指定されています。
そこでtransform-originプロパティを使用すると、基準点を変更することができます。

.hoge {
 transform: rotate(45deg); 
 transform-origin: left top;  // 要素の左上を基準に45度回転する
}

実際に実行するとこんな感じです。

## transitionプロパティ

transitionプロパティは要素の変化をアニメーションで描画してくれます。

// transition-duration
p {
 background-color: blue;
 transition-duration: 0.7s;   //ホバー時に背景色が0.7秒かけて青から赤に変化する
}

p:hover{
 background-color: red;
}


//  transition-property
p {
 background-color: blue;
 color: white;
 transition-duration: 0.7s;  
 transition-property: background-color;  //ホバー時に背景色だけが0.7秒かけて青から赤に変化する 文字色も変わるがアニメーションが適応されない
}

p:hover{
 background-color: red;
 color: black;
}


//transition-timing-function
p {
 background-color: black;
 color: white;
 width: 50px;
 transition-duration: 2s;
 transition-timing-function: ease-in-out;  // ホバー時に横幅がゆっくりと加速しながら伸び、伸びきる間際に減速する
}

p:hover{
 width: 1500px;
}


//transition-delay
p {
 background-color: black;
 color: white;
 width: 50px;
 transition-duration: 2s;
 transition-delay: 1s;  //ホバーしてから1秒後に変形が始まる
}

p:hover{
 width: 1500px;
}


//transition

p {
 transition: 変化時間 プロパティ 変化の方法 変化開始時間  // padding: 上右下左 ; のように一気に指定できる
}

思ったより長くなりそうなので一旦ここまで！