CSSアニメーション

疑似クラスなどと一緒に使われることが多いがCSSの記述でアニメーションすることが可能です。
例えば
p:hover{color:red;}と指定すればpタグの上にカーソルが乗ると色が赤色に変更されるというアニメーションを施すことができます。

上記の記述だけだとカーソルの上に乗せた瞬間に赤色に変化するが、ゆっくりと時間をかけて変化させることも可能である。

その場合はpタグにtransitionプロパティで指定します。
※p:hoverではなくp要素にtransitionを指定します。

p{transition-proparty: color;
transition-duration: 2s;}
p:hover{color:red;
background-color: brown;}

この記述でpタグにカーソルを乗せると背景色が2秒かけて赤色に変化

tarnsition-property

どのトランジションを対象するのかを指定します。上記の場合はcolorだけが対象になりbackground-color: brown;はアニメーションの対象外になります。全てにアニメーションを設定したい場合は省略するかallを指定します。

tarnsition-duration　

トランジションをおこなう時間です。2sだと2秒かけてアニメーションをおこないます。
tarnsition-timing-function　アニメーションのエフェクトeaseやease-in　ease-outなどが設定できます。
tarnsition-delay　アニメーションをするまでの待ち時間

transform（移動、変形）プロパティ

移動：translate（X方向の移動距離,Y方向の移動距離）

拡縮：scale（X方向の比率,Y方向の比率）

回転：rotate（回転角度）

transform:translate(100px,0);

x軸に100px移動

transform: rotate(30deg)

30度回転