このコードは、CSSアニメーションを使用して要素のスケール（大きさ）を変更する方法を定義しています。まず、@keyframes zoom-inでアニメーションのキーフレームを設定し、0%の時点では要素が1.2倍に拡大されており、100%の時点では元の大きさに戻るようにしています。次に、animation: zoom-in 10s linear 0s 1 normal both;というプロパティを使用して、このアニメーションを適用します。ここで、アニメーションの名前をzoom-inとし、持続時間を10秒、進行速度を一定に、開始を即時に、実行回数を1回に設定しています。また、アニメーションの再生方向を通常の開始から終了にし、アニメーションの適用中と終了後に初期状態と終了状態の両方を維持するようにしています。
読者Zoom-inアニメーションの実装 CSSアニメーションプロパティは、最初にどこを理解するとよいですか？
木村どの要素を基準にするか、どの状態で見た目を変えるか、画面幅が変わっても崩れないかを順番に確認することが大切です。
読者実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？
木村はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。
実装内容
実装内容では、Zoom-inアニメーションの実装 CSSアニメーションプロパティを理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
動画
CSSアニメーションを使用し、上記のようなアニメーションを実装します。
実装内容で押さえたいポイント
実装内容は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
コード
コードでは、Zoom-inアニメーションの実装 CSSアニメーションプロパティを理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
keyframes
@keyframes zoom-in {
0% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}解説
- @keyframes:
@keyframesは、CSSアニメーションの中核を成すもので、アニメーションの途中でどのようにスタイルが変化するかを定義します。
- zoom-in:
- これはアニメーションの名前です。後でCSSでこの名前を使ってアニメーションを要素に適用します。
- 0% と 100%:
- アニメーションの進行を示すキーとなるポイントです。ここでは
0%がアニメーションの開始点、100%が終了点を示しています。
- アニメーションの進行を示すキーとなるポイントです。ここでは
- transform: scale():
transformプロパティは、要素を変形させるために使います。scale()関数は要素のサイズを変更します。例えば、scale(1.2)は要素を120%の大きさに、scale(1)は元の大きさにします。
このコードがすること
- 開始時 (0%):
- 要素は通常のサイズの120%にスケールアップされています。つまり、元のサイズよりも少し大きくなっています。
- 終了時 (100%):
- 要素は元のサイズ (
scale(1)) に戻ります。
- 要素は元のサイズ (
CSS
.swiper-slide img {
/* img要素に以下のアニメーションプロパティが適用されます: */
animation: zoom-in 10s linear 0s 1 normal both;
/*
- zoom-in: 適用するアニメーションの名前。
- 10s: アニメーションの持続時間は10秒。
- linear: アニメーションは一定の速度で進行します。
- 0s: アニメーションが開始するまでの遅延時間はなし。
- 1: アニメーションは1回再生されます。
- normal: アニメーションは正方向に再生されます。
- both: アニメーションのプロパティがアニメーション中および終了後も適用されます。
*/
}- アニメーション名 (
zoom-in)- アニメーションの名前。対応する
@keyframesルールを定義する必要があります。 - 例：cssコードをコピーする
@keyframes zoom-in { 0% { transform: scale(0); } 100% { transform: scale(1); } }
- アニメーションの名前。対応する
- 継続時間 (
10s)- アニメーションの実行時間。ここでは10秒。
- タイミング関数 (
linear)- アニメーションの進行速度。
linearは一定速度を意味する。 - 他の例：
ease,ease-in,ease-out
- アニメーションの進行速度。
- 遅延時間 (
0s)- アニメーションが開始するまでの遅延時間。ここでは0秒（遅延なし）。
- 再生回数 (
1)- アニメーションの再生回数。ここでは1回のみ再生。
- 他の例：
infinite（無限に繰り返す）
- アニメーション方向 (
normal)- アニメーションの進行方向。
normalは通常の順序で進行。 - 他の例：
reverse（逆方向）
- アニメーションの進行方向。
- 適用方法 (
both)- アニメーションの開始前と終了後の状態をどのように保持するか。
bothは両方を保持。 - 他の例：
forwards（終了後の状態を保持）,backwards（開始前の状態を保持）
- アニメーションの開始前と終了後の状態をどのように保持するか。
実装例
実装例では、Zoom-inアニメーションの実装 CSSアニメーションプロパティを理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes zoom-in {
0% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
img {
animation: zoom-in 10s linear 0s 1 normal both;
}
</style>
</head>
<body>
<img src="https://picsum.photos/1000/500?random=3" alt="">
</body>
</html>
実装例で押さえたいポイント
実装例は、コードや設定だけを切り離して覚えるより、何を変えるための処理なのかを確認してから試すと理解しやすくなります。変更前の状態を控え、作業を一つずつ反映すると、問題が起きた場所も特定しやすくなります。
実装例の確認方法
スマートフォン、タブレット、PCの幅で確認し、横スクロールや文字の重なりがないかを見ます。マウス操作だけでなく、キーボードフォーカスや文字拡大時の見え方も確認してください。
まとめ
- CSSのアニメーションプロパティで実装ができる
- @keyframesでアニメーションを定義する
- javascriptなど難しい設定は必要がない
- 様々なオプションが準備されている
- フェードインアニメーションと組み合わせると、表現の幅が広がる。
MEMBER COMMENTS
コメント（0件）