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