cssのtransitionプロパティについて
サマリ
- transitionはアニメーションを簡単に定義できる
- 移り変わりを定義するプロパティ
- 引数の定義内容によって要素の変化を詳細に決められる
.btn { background-color: white; color: black; border: 1px solid black; padding: 10px 40px; margin: 50px 0; font-weight: 600; cursor: pointer; -webkit-transition: all 0.3s; transition: all 0.3s; } .btn:hover { background-color: black; color: white; }
transitionの定義内容
- 第1引数:変化させるプロパティ(文字色だけならcolorとか)
- 第2引数:変化の所要時間(2s=2秒)
- 第3引数:移り変わりの緩急(easeなど)
- 第4引数:遅延時間(第二引数と同じ定義方法)
1〜4までの引数を定義した場合の記述例
.btn { transition: all 0.3s ease 0.3s; }