CSS: transition
特定のpropertyが、状態Aから状態Bに変化する際に、変化にかける時間や緩急を指定する
「変化させる」というactionを指定することはできない
誰かが発火した「変化させる」というactoinに対し、変化の仕方を指定する
この状態変化は何によって生じたかは問わない
JSかもしれないし、 :hover とかかもしれない
property
transition
以下4つをまとめて指定する
e.g. transition: all 300ms 0s ease;
animationの開始から終了までにかける時間
animationが開始するまでの遅延時間
参考
任意のpropertyをアニメーションできるわけではない
どういう考え方をして実装する？
以下のやり方であってる？
状態Aのcssを定義
css.box {
width: 100px;
height: 100px;
background: #000;
}
状態Bのcssを定義
css.box:hover {
background: #ccc;
width: 300px;
}
この時点でやめても状態の切り替えはできる
:hover なので。
ただし、0秒で切り替わる
これに対して変化の速度などを指定する
transitionを使って、どのpropertyを、どういう速度で変化させるかを指定
これをA側に書く(?)
css.box {
width: 100px;
height: 100px;
background: #000;
transition: all 300ms 0s ease; /* 追加 */
}
transtionは変更に伴ったpropertyの変更程度
もう少し細かく指定したければanimationの方を使う