6.1 @keyframesルール
CSSアニメーションは、最小限の労力で複雑で滑らかな視覚効果を作ることができるよ。CSSでアニメーションを作るための
主なツールは@keyframesルールで、これはアニメーションのキーフレームと各フレームでのスタイルの変化を定義するんだ。
@keyframesルールはCSSプロパティの変化をアニメーションのいろんな段階で定義するために使われるよ。キーフレームは、
アニメーションの進行中の特定の時点で適用されるスタイルを決めるんだ。
シンタックス 1：
@keyframes animation-name {
from {
/* 初期スタイル */
}
to {
/* 最終スタイル */
}
}
シンタックス 2：
@keyframes animation-name {
0% {
/* 初期スタイル */
}
100% {
/* 最終スタイル */
}
}
説明：
fromはアニメーション時間の0%に相当するよtoはアニメーション時間の100%に相当するよ
例: 背景色の滑らかな変化
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Animation Example</title>
<style>
@keyframes changeColor {
from {
background-color: lightblue;
}
to {
background-color: lightcoral;
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: changeColor 3s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Hover over me!</div>
</body>
</html>
説明:
@keyframes changeColorルールは、要素の背景色をlightblueからlightcoralに変化させるアニメーションを定義するよ.animated-box要素のanimationプロパティは、アニメーションchangeColorが3秒続き、無限に繰り返されることを示しているよ
6.2 複数のキーフレーム
中間状態のスタイルを定義することで、より複雑なアニメーションを作るために、2つ以上のキーフレームを使えるよ。
例: 色を変えながらの対角移動
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Keyframes Example</title>
<style>
@keyframes moveAndChangeColor {
0% {
background-color: lightblue;
transform: translate(0, 0);
}
50% {
background-color: lightgreen;
transform: translate(100px, 100px);
}
100% {
background-color: lightcoral;
transform: translate(200px, 0);
}
}
.animated-box {
width: 200px;
height: 200px;
background-color: lightblue;
animation: moveAndChangeColor 5s infinite;
}
</style>
</head>
<body>
<div class="animated-box">Watch me move!</div>
</body>
</html>
説明:
@keyframes moveAndChangeColorルールは、要素の背景色と位置を3段階で変えるアニメーションを定義するよ。
- アニメーションの0%の時点では、要素はライトブルーの色で初期位置にいるよ
- アニメーションの50%の時点では、要素はライトグリーンの色で100ピクセル右下に移動するよ
- アニメーションの100%の時点では、要素はライトコーラルの色で200ピクセル右に移動するよ
6.3 簡単なアニメーションの例
例 1: パルス
要素が滑らかに大きくなったり小さくなったりするパルスエフェクトを作るよ。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pulsing Effect</title>
<style>
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.pulse-box {
width: 150px;
height: 150px;
background-color: lightpink;
animation: pulse 2s infinite;
}
</style>
</head>
<body>
<div class="pulse-box">Pulsing</div>
</body>
</html>
説明:
@keyframes pulseルールは、要素が120%に拡大し元のサイズに戻るアニメーションを定義するよ.pulse-box要素のanimationプロパティは、アニメーションpulseが2秒続き、無限に繰り返されることを示しているよ
例 2: 回転
要素が連続して回転する効果を作るよ:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Effect</title>
<style>
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.rotate-box {
width: 100px;
height: 100px;
background-color: lightseagreen;
animation: rotate 3s infinite linear;
}
</style>
</head>
<body>
<div class="rotate-box">Rotating</div>
</body>
</html>
説明:
@keyframes rotateルールは、要素を0度から360度まで回転させるアニメーションを定義するよ-
.rotate-box要素のanimationプロパティは、アニメーションrotateが3秒続き、 無限に繰り返され、一定の速度で起こることを示しているよ（linear）
GO TO FULL VERSION