hiroyuki9614

いつも忘れるのでメモに。

アニメーションの実例がたくさん記載されているサイト。 css-tricks

CSSアニメーションのプロパティ

transition(トランジション)

簡単にアニメーションを実装できるので、複雑な制御はできないがメンテナンスが容易。 :hover :focus :clickなどの状態変化の擬似クラスを使用して発火させる。参考

また、Javascriptでも制御が可能。

クラスのON-OFFで発火させる。クラスがONになったらtransitionは発火。
距離や時間などを動的に制御する。

.selector {
 transition: margin-right 1s 20px 1s;
}

上記のような記法がされるが、下記に基づいている。

transition-property

対象となるcssのプロパティ。 cssすべてのプロパティが適用可能。 all でセレクターすべてのプロパティを対象にされる。

.selector {
 /* すべてのプロパティを指定するが、あとに記述した
 プロパティは 上書きされる。 */
 transition: all 1s;
   opacity 2s;
}

transition-duration

1つ目に指定した時間がアニメーションを動かす時間となる。 1sにすれば1秒でアニメーションが終わる。

/* 対象プロパティ 再生時間(s またはms) */
.selector {
 transition: color 1s;
}

transition-delay

2つ目に指定した時間がアニメーションを遅れて開始させる時間になる。順番がどうあれ、2つめの時間が指定されたらこのプロパティが指定されたことになる。

/* 対象プロパティ 再生時間(s またはms) 遅延時間(s またはms) */
.selector {
 transition: color 1s 1s;
}

transition-timing-function

CSSプロパティとアニメーションの時間に対して、どのような動作をさせるかを設定するために使用する。簡単に言えば加速曲線を定義する。

下記が規定値として用意されている。またこれらはcubic-bezier()関数でも再現でき、既定値以外の動作も表現できる。

cubic-bezier()関数は3次ベジェ曲線を使用してなめらかな偏移を作成する。 cubic-bezier(x1, y1, x2, y2)

ジェネレーター動作の参考集

/* 使い方の例 */
.selector {
 transition: width 1s ease;
}

/* cubic-bezier(0.25, 0.1, 0.25, 1.0)と同値 */
/* 後半にスピードを上げる */
transition-timing: ease;
/* cubic-bezier(0.0, 0.0, 1.0, 1.0) */
transition-timing: liner;

また、steps(n, )により、指定した数だけアニメーションを分けて実行できる。ステップ数はn どの位置で停止するかはジャンプ用語で決まる。コマ送りのようなアニメーションになる。

/* 使用例 */
.selector {
 transition: width 1s steps(6, end);
}

@starting-style

2024年8月から導入された。 JavaScriptで動的にDOM操作を行う際、JavaScriptでのスタイリングが優先されてしまう問題があったので、CSS側で初期値を設定できるようにした。

擬似クラスでの制御

animation @keyframes

参考

アニメーションについてまとめた