CSS3でキーフレームアニメーションを作成する方法を徹底解説
CSS3でキーフレームアニメーションを作成するには、@keyframesルールを使って個々のキーフレームを定義します。キーフレームとは、アニメーションの開始から終了までの中間ステップ（要素の状態変化）を細かく制御するための仕組みです。
キーフレームアニメーションの基本の流れ
CSS3でアニメーションを実装する際は、主に以下の2つのステップを行います。
- ① @keyframesでアニメーションを定義する：「from」（開始時点）と「to」（終了時点）、もしくは0%〜100%のパーセンテージ指定で、各時点のスタイルを記述します。
- ② animationプロパティで要素に適用する：定義したアニメーション名に加え、再生時間や繰り返し回数などを指定して、対象の要素に紐付けます。
サンプルコード
以下は、正方形が右へ移動しながら円形に変化するキーフレームアニメーションの例です。
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: rgb(218, 78, 36);
border: 4px solid rgb(0, 0, 0);
position: relative;
animation: circleMove 5s infinite;
}
@keyframes circleMove {
from {
left: 0px;
border-radius: 0px;
}
to {
left: 200px;
border-radius: 50%;
}
}
</style>
</head>
<body>
<h1>CSS3 keyframe example</h1>
<div></div>
</body>
</html>実行結果
上記のコードを実行すると、次のような出力が得られます。
時間が経過すると、正方形が徐々に変形し、円のように表示されます。
コードのポイント解説
animation: circleMove 5s infinite;… アニメーション名「circleMove」を5秒かけて再生し、無限に繰り返す設定です。from { left: 0px; border-radius: 0px; }… 開始時点では左端に位置し、角丸のない正方形として表示されます。to { left: 200px; border-radius: 50%; }… 終了時点では200px右へ移動し、border-radiusが50%になることで円形へと変化します。
このように@keyframesとanimationプロパティを組み合わせることで、JavaScriptを使わずにCSSだけで滑らかなアニメーションを実現できます。パーセンテージ指定（例：25%、50%、75%）を使えば、より複雑な中間ステップも自由に制御可能です。
-
HTMLドキュメントの作成方法とは？基本構造をサンプルコード付きで解説
HTMLドキュメントは、Webページの構造を定義するものです。大きく分けて「head（ヘッド）」と「body（ボディ）」という2つの部分で構成されており、headにはドキュメントに関する情報（メタデータなど）が、bodyには実際にブラウザ上に表示されるコンテンツが含まれます。head部分は<head>…</head>タグの中に記述し、body部分は<body>…</body>タグの中に記述します。また、HTMLドキュメントは必ず<!DOCTYPE html>という宣言から始まります。これはDTD（Document Type Defin
-
Apple IDの作成方法を完全解説｜子ども用アカウントや2ファクタ認証の設定まで
Apple製品やサービスを使いこなすうえで、Apple IDは欠かせない存在です。幸い、その作成はとても簡単。この記事では、自分用・お子様用のApple IDの作り方から、強固なセキュリティ設定、ファミリー共有グループの始め方まで、わかりやすく解説します。 Apple IDを作成する手順 Apple IDは、Apple公式サイトのApple IDページ（appleid.apple.com）にアクセスし、「Apple IDを作成」をクリックするだけで登録できます。 appleid.apple.com は、Apple IDの作成と管理を行うためのオンライン窓口です Apple IDの登録にあたっ