transitionでアニメーションの時間設定
transitionはアニメーションの時間などを指定するためのプロパティ。アニメーションが終了すると元のプロパティに戻るので、ループさせたり、より細かい指定が必要な場合は「animation」を使用した方が良い。
hoverアクションなど「ちょっとしたアニメーション」時に使用するのが多いと思われる。
それぞれ個別に指定出来るプロパティ。
- transition-property・・・適用するプロパティの名前（初期値「all」）
- transition-duration・・・アニメーション開始から終了までの所要時間を指定（初期値「0s」）
- transition-timing-function・・・アニメーションのイージングを指定（初期値「ease」）
- transition-delay・・・アニメーションを開始するまでの遅延時間を指定（初期値「0s」）
これらをひとまとめで書けるのが「transition」
/*
長ったらしいので以下に置き換えて書いてます。
property -> transition-property値
duration -> transition-duration値
easing -> transition-timing-function値
delay -> transition-delay値
*/
/* １つのプロパティに指定（スペース区切り） */
transition: property duration easing delay;
/* 複数のプロパティに指定（カンマ区切りにする） */
transition: property duration easing delay, property duration easing delay;/* Vendor prefixesの例 これらは省略します */
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
Autoprefixer CSS: Browserslist last 4 version 2021.01
ひとまとめでも入れる値は一緒なのでそれぞれまとめてみる。
プロパティの指定 - transition-property
/* 値はCSSプロパティ（初期値はall） */
transition-property: 値;値部分にはCSSで使うプロパティ（幅なら「width」、背景色なら「background-color」）が入る。すべてを含めるなら「all」となる。複数の値の指定はカンマ区切りで指定。
アニメーションの時間 - transition-duration
/* 値はsもしくはms（初期値は0ｓ） */
transition-duration: 値;値単位は「s」なら「秒（1sなら１秒）」、「ms」なら「ミリ秒（1msなら1000分の1秒）」を指定。
複数指定する場合カンマ区切りで。この部分はtransition-propertyのプロパティと連動しているようなので同一数にする方が無難。
/* 複数指定の例 */
transition-property: width, background-color;
transition-duration: 3s, 1s;イージングの指定 - transition-timing-function
transition-timing-function: 値;値には以下がある。
- ease・・・始めと終わりをゆっくり
- linear・・・均一の速度
- ease-in・・・除々に加速しながら
- ease-out・・・除々に減速しながら
- ease-in-out・・・加速し減速
- cubic-bezier( 値１, 値２, 値３, 値４ )・・・独自のイージングを設定する
- steps( ステップ数, 変化する位置 )・・・ステップ数ごとに等間隔で変化
stepsは一定時間内で段階的に変化する。変化する位置は「start」もしくは「end（デフォルト）」。
パラパラ漫画やコマ撮りアニメーションみたいのを作るのに便利そう。
cubic-bezierのジェネレーター以下のページ参照。目視出来る上に設定したらコピペで完了。Excellent！
遅延時間 - transition-delay
/* 値はsもしくはms（初期値は0ｓ） */
transition-delay: 値;値単位は「s」なら「秒（1sなら１秒）」、「ms」なら「ミリ秒（1msなら1000分の1秒）」を指定。
transition-durationと同じく複数指定する場合カンマ区切りで。この部分はtransition-propertyのプロパティと連動しているようなので扱いはtransition-durationと同じ。
