transitionで設定できるプロパティ
<-- transition-property -->
アニメーションを適用する対象のプロパティを定義
全てに適用する場合と指定を省略した場合「all」が適用
例）
colorの色を白から黒に変えたい
text {
color: #fff;
transition-property: color;/*アニメーションをcolorのプロパティのみ適用*/
transition-duration: 0.5s;/*0.5秒で変化させる*/
}
.button a:hover {
color: #000;
}
<-- transition-duration -->
アニメーション開始から終了までを定義
単位はs(秒)もしくはms(ミリ秒)
例）
text {
transition-duration: 1.5s;/*1.5秒で変化させる*/
}
<-- transition-delay -->
アニメーションが開始するまでの遅延時間を定義
省略した場合は0sが適用
例）
text {
transition-delay: 1s;/*1秒後にアニメーションが開始*/
}
<-- transition-timing-function -->
アニメーションが開始され終了するまでにおける変化の進行度合いを定義
ease
開始時と終了時にはゆっくり変化（初期値）
ease-in
開始時はゆっくり変化し、終了時は早く変化
ease-out
開始時に早く、終了時にゆっくり変化
ease-in-out
easeよりさらに、開始時と終了時はゆっくり変化
linear
速度が変わることなく一定に変化
cubic-bezier(x軸の値, y軸の値, x軸の値, y軸の値)
変化の度合いをベジェ曲線により任意で指定
<-- transition -->
上記4つのプロパティをまとめて記述
それぞれ半角スペースで区切って入力することで定義
記述の順序に決まりはないが、transition-durationの値とtransition-delayに関しては、先に記述したほうがtransition-delayの指定になる
transition: transition-propertyの値 transition-durationの値 transition-delayの値 transition-timing-functionの値;
例）
.example {
transition: all 0.5s 0s ease;
}