transition-property

transition-duration

400ms

transition-timing-function

transition-delay

0ms

通常状態 🎨

CSS

.card {
  background-color: #f0fdf4;
  color: #1e293b;
  border-radius: 8px;
  transition: background-color 400ms ease 0ms;
}

.card:hover {
  background-color: #0d9488;
}

使い方

transition-property でアニメーションしたいプロパティを選ぼう
duration・timing-function・delay を調整して動きの違いを確認しよう
「📋 CSSをコピー」ボタンでコードをコピーして、自分のスタイルシートに貼り付けよう！

CSS Transitionビジュアライザー

使い方

CSS Transitionをもっと詳しく学ぼう

関連ツール