【css】transitionプロパティの使い方

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;
}