CSSアニメーションの開始時間や動きを変化させる方法（transition-delay、transition-timing-function、一括指定プロパティ(transition)）

アニメーションの開始時間を操作する

transition-delay: 1s;　を使うと、アニメーションの開始時間を操作できます。

変更前（むらさき色）の要素を作ります。

変更後（移動してあか色）の要素を作ります。

transform: translate（X,Y）;　は、移動です。

transition-property:transform, background-color;で変更後の要素を指定します。

transition-duration: 1s;で変更後までの時間を指定します。

transition-delay: 1s;　で、アニメーション開始までの時間を指定します。

１秒後に、移動しながら、色が変化するCSSアニメーションができました。

transition-timing-function: ; を使うと、アニメーションの動きに変化（緩急）をつけることができます。

transition-timing-function: ease;　は初期値で、自然な動きです。

transition-timing-function: out;　は、スタートでパッと弾かれた動きです。

transition-timing-function: ease in out;　は、　スタートがゆっくりで重いものを動かすような動きです。　

transition-timing-function: linear;　は、常に一定の速度で動きます。

transition: ;　を使えば、transition-duration、transition-delay、transition-timing-function　を順不同で一括指定することができます。