きれいなデザインのサイトができた！と思ってマウスを動かしても、ボタンが無反応だと少しガッカリしませんか？
Webサイトにおける「動き（アニメーション）」は、単なる飾りではありません。
「今、あなたはここを触っていますよ！」という、ユーザーへの大事なメッセージ（フィードバック）なのです。
今回は、JavaScriptなどの難しいプログラミングを使わず、CSSだけで要素を「フワッ」「クルッ」と動かす魔法の方法を学びます。
動きを作る「3つの神器」
CSSアニメーションの基本は、以下の3つの組み合わせでできています。
- :hover（きっかけ）
「マウスが乗ったら〜する」 - transition（時間）
「〜秒かけて変化する」 - transform（変化）
「拡大する・回転する・移動する」
一つずつ見ていきましょう。
1. きっかけを作る「:hover（ホバー）」
CSSのセレクタの後ろに :hover をつけると、「マウスが乗っている時だけのデザイン」を指定できます。
.box {
background-color: blue;
}
/* マウスが乗ると赤になる */
.box:hover {
background-color: red;
}しかし、これだけだと色が「パッ！」と一瞬で切り替わってしまい、少し目がチカチカします。
これを「フワッ」とさせるのが次の主役です。
2. 時間を操る「transition（トランジション）」
これこそがアニメーションの要です。
「変化にかける時間」を指定します。
.box {
background-color: blue;
/* 0.5秒かけて変化させる！ */
transition: 0.5s;
}
.box:hover {
background-color: red;
}これを足すだけで、青から赤へ、0.5秒かけてじわじわと色が変わるようになります。
まるで「テレポート（瞬間移動）」だった動きが、「スムーズな歩行」に変わるイメージです。
3. 形を変える「transform（トランスフォーム）」
色を変えるだけじゃ物足りない？
なら、形を変えてしまいましょう。よく使うのは以下の3つです。
- scale(1.1)：1.1倍に拡大する（ズーム）
- rotate(45deg)：45度回転する（スピン）
- translate(0, -10px)：上に10px移動する（ジャンプ）
実践：マウスで浮き上がる「魔法のカード」
では、これらを組み合わせて、ポートフォリオサイトやブログ記事一覧でよく見る「マウスを乗せるとフワッと浮き上がるカード」を作ってみましょう。
コピペして、実際にマウスを乗せてみてください！
<!DOCTYPE html>
<html lang="ja">
<head>
<style>
body {
padding: 50px;
background-color: #f0f0f0;
display: flex;
justify-content: center;
}
/* カードの基本スタイル */
.card {
width: 300px;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* うっすらした影 */
/* ★アニメーションの準備 */
transition: 0.3s ease-out; /* 0.3秒かけて、最後はふわっと止まる */
cursor: pointer; /* マウスカーソルを指の形にする */
}
/* マウスが乗った時のスタイル */
.card:hover {
/* 1. 少し上に持ち上げる */
transform: translateY(-10px);
/* 2. 影を濃く・大きくして「浮いている感」を出す */
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
/* 3. 背景色を少し変える */
background-color: #e3f2fd;
}
</style>
</head>
<body>
<div class="card">
<h2>Hover Me!</h2>
<p>マウスを乗せてみてください。<br>フワッと浮き上がりますよ！</p>
</div>
</body>
</html>まとめ：動きは「隠し味」
いかがでしたか？transition を1行足すだけで、Webサイトの高級感がグッと上がりましたね。
最後に、アニメーションを使う時の注意点です。
「やりすぎ注意！ 動きは短く、さりげなく。」
0.3秒〜0.5秒くらいが心地よい長さです。
3秒もかけてゆっくり色が変わるボタンなんて、イライラしますよね？（笑）
ユーザーの邪魔をせず、「触って気持ちいい」演出を目指して調整してみてください！