css の transition, animation を使ってみる

css で要素を動かす transition, animation を使ってみる

transition

要素をプロパティ事に動かすことが出来る
hover とかと組み合わせて使うと良さそう
要素に対して transition を設定
要素のhover ありに変化した後の状態を設定

• 構文

div {
    transition: プロパティ 変化時間 変化の仕方 遅延時間;
}

/** よく使うのはプロパティと変化時間、繰り返しもできるので使用例は以下 */
div {
  transition: width 2s, height 2s, line-height 2s, background-color 2s, transform 2s;
}

• 使用例

See the Pen Untitled by sueasen (@sueasen) on CodePen.

animation

要素をいろんなパターンで変化させることが出来る
全体的な動きや細かく動きを設定したいときに使うと良さそう
@keyframes の 0%, 20%, ... で変化の仕方を細かく設定していく（別に3つとか少なくてもOK）
0%, 100% の時は from, to で設定してもOK

• 構文

div {
    animation: キーフレーム名 変化時間 変化の仕方 遅延時間 回数 再生の向き スタイル適用の仕方 実行/停止;
}

@keyframes キーフレーム名 {
    0% {
        プロパティ1: 値1-1;
        プロパティ2: 値2-1;
    }
    50% {
        プロパティ1: 値1-2;
        プロパティ3: 値3-1;
    }
    100% {
        プロパティ1: 値1-3;
        プロパティ2: 値2-2;
        プロパティ3: 値3-2;
    }
}

• 使用例

See the Pen Untitled by sueasen (@sueasen) on CodePen.