CSSトランジションとアニメーションは、ウェブサイトをより魅力的にするための便利な技術です。簡単なコードを追加するだけで、要素をスムーズに動かしたり、効果をつけたりすることができます。

CSSトランジションとは？

CSSトランジションとは、要素の状態が変わった時に、その変化を滑らかにアニメーションさせるものです。例えば、ボタンにマウスを重ねた時に色が変わるような効果を与えることができます。

基本的なトランジション設定方法

.button {
  transition: background-color 0.3s ease;
}
.button:hover {
  background-color: lightblue;
}

CSSアニメーションとは？

CSSアニメーションは、より複雑な動きを作り出すことができる技術です。要素を動かしたり、回転させたり、拡大縮小させたりすることができます。

基本的なアニメーション設定方法

@keyframes move {
  0% { left: 0; }
  100% { left: 200px; }
}

.box {
  animation: move 2s infinite alternate;
  position: relative;
}

トランジションとアニメーションの違い

トランジションは状態の変化をなめらかにする効果を与えるのに対し、アニメーションはより複雑な動きを制御し、キーフレームを使用して状態の変化を詳細に設定することができます。

まとめ

以上がCSSトランジションとアニメーションの基本的な使い方です。是非試してみて、自分だけの素敵なウェブサイトを作ってみましょう！