目次
はじめに｜CSSで「動き」をつけるってどういうこと？
こんにちは、「ぷろぐらの森」です🌱
前回は、CSSを使ってページをカラフルにする方法をご紹介しました。(前回の記事はこちら)
今回は、Webページの要素を「動かす」方法を学びましょう！
たとえば：
- 文字がふわっと出てくる
- ボタンを押すと色が変わる
- キャラクターがぴょんぴょん動く
これらはすべて CSSアニメーション を使って作られています。
CSSアニメーションってなに？
CSSアニメーションとは、CSSだけで要素にアニメーション（動き）をつけられる機能です。
JavaScriptを使わずに、HTMLとCSSだけで簡単に以下のようなことができます：
- 要素を動かす（スライド・回転・ズーム）
- 色や大きさを変える
- 光らせたりフェードインさせる
CSSで動きをつける方法（基本）
CSSでアニメーションを実現するには、主に以下の2つを使います：
@keyframes（キーフレーム）animationプロパティ
ステップ①：キーフレームを定義
キーフレームは「動きの設計図」のようなものです。
@keyframes fuwafuwa {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}このコードは、「ふわっと上から出てくる」動きを定義しています。
ステップ②：要素にアニメーションを適用
.fuwa {
animation: fuwafuwa 1s ease-out;
}このように .fuwa というクラスにアニメーションを適用すれば、実際に動きます！
実際にやってみよう！動く自己紹介ページ
🔹 HTMLファイル
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>じこしょうかい</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="fuwa">こんにちは！ぼくは〇〇です！</h1>
<p class="fuwa">プログラミングがだいすき！</p>
</body>
</html>🔹 style.css
body {
background-color: #fff8dc;
font-family: "Arial", sans-serif;
text-align: center;
margin-top: 100px;
}
@keyframes fuwafuwa {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fuwa {
animation: fuwafuwa 1.5s ease-out;
}これで、ページを開いたときにタイトルや文章がふわっと出てくるようになります！
よく使うアニメーション効果一覧
| 動き | キーワード | 説明 |
|---|---|---|
| 透明から表示 | opacity | フェードイン効果 |
| 移動 | transform: translate() | 上下左右に動かす |
| 回転 | transform: rotate() | くるくる回す |
| 拡大縮小 | transform: scale() | ズーム効果 |
ホバーアニメーションも使ってみよう！
CSSでは「マウスをのせたとき」に動きをつけることもできます。
🔹 style.css
.button {
background-color: tomato;
color: white;
padding: 10px 20px;
transition: transform 0.3s ease;
}
.button:hover {
transform: scale(1.1);
}🔹 HTMLファイル
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>じこしょうかい</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="fuwa">こんにちは！ぼくは〇〇です！</h1>
<p class="fuwa">プログラミングがだいすき！</p>
<button class="button">ちょっと大きくなるボタン</button> <- 追加！！
</body>
</html>マウスをのせると、ボタンが少し大きくなるアニメーションが加わります！
子どもでもわかる！CSSアニメーションの仕組み
タグの「箱」に、どんな動きをさせたいかを「@keyframes」で決めて、
それを「animation」で呼び出す。
📦 h1タグ →
🎬 @keyframesで動き方を作る →
🎨 .fuwaクラスで適用！
この考え方を覚えれば、どんなタグにもアニメーションをつけることができます。
アニメーションを作るときのコツ
- やりすぎ注意！
動きすぎると見づらくなることもあるので、やさしい動きから始めよう。 - テストしながら確認！
ブラウザで見ながら試行錯誤するのが大切。 - 色と動きを組み合わせると効果UP！
背景色や文字サイズを一緒に変えると印象が変わります。
HTMLで作ったページに、CSSで色や形、動きをつけることで、
世界にひとつだけのオリジナルページが完成します！
コメント