はじめに
この実験では、シンプルで効果的なズームインとズームアウトのエフェクトを作成することで、CSSアニメーションを探索します。CSSアニメーションを使用すると、JavaScriptを使わずにウェブページに動的な視覚効果を追加することができます。この実験の終わりまでに、CSSのキーフレームとアニメーションプロパティを使って、ウェブサイトのユーザー体験を向上させることができるスムーズなトランジションを作成する方法を理解するようになります。
This tutorial is from open-source community. Access the source code
💡 このチュートリアルは英語版からAIによって翻訳されています。原文を確認するには、 ここをクリックしてください
この実験では、シンプルで効果的なズームインとズームアウトのエフェクトを作成することで、CSSアニメーションを探索します。CSSアニメーションを使用すると、JavaScriptを使わずにウェブページに動的な視覚効果を追加することができます。この実験の終わりまでに、CSSのキーフレームとアニメーションプロパティを使って、ウェブサイトのユーザー体験を向上させることができるスムーズなトランジションを作成する方法を理解するようになります。
アニメーションを作成する前に、扱うHTML構造を理解する必要があります。このステップでは、提供されたHTMLファイルを調べ、必要な修正を行います。
エディタで index.html
ファイルを開きます。
ファイルが空または存在しない場合は、以下の内容で作成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zoom In Zoom Out Animation</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>CSS Animation Demo</h1>
<p>This box demonstrates a zoom in zoom out animation:</p>
<div class="zoom-in-out-box"></div>
</body>
</html>
このHTMLが何をするかを理解しましょう。
style.css
という名前の外部CSSファイルをリンクしています。zoom-in-out-box
クラスの <div>
要素があることです。変更を加えた場合は、index.html
ファイルを保存します。
このdiv要素がアニメーションを作成するためのキャンバスになります。次のステップでは、この要素をCSSを使ってスタイルを設定します。
HTML構造が整ったので、アニメーション要素の基本的なCSSスタイリングを作成しましょう。
エディタで style.css
ファイルを開きます。
ファイルが空または存在しない場合は、以下の内容で作成します。
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #333;
}
.zoom-in-out-box {
margin: 24px;
width: 50px;
height: 50px;
background: #f50057;
}
このCSSが何をするかを理解しましょう。
.zoom-in-out-box
については、
これらの変更を加えた後、style.css
ファイルを保存します。
進捗状況を確認するには、VSCodeの右下隅にある「Go Live」ボタンをクリックします。これにより、ポート8080でウェブサーバーが起動します。その後、Web 8080 タブを更新して、スタイルが適用されたボックスを確認します。
これで、ウェブページ上に小さなピンクの正方形が表示されるはずです。この正方形が、次のステップでアニメーション化する要素です。
CSSアニメーションは、アニメーションシーケンス中の様々な時点で要素が持つべきスタイルを指定するキーフレームを定義することで動作します。ズームイン・ズームアウトアニメーションのキーフレームを作成しましょう。
style.css
ファイルを開き、末尾に以下のコードを追加します。@keyframes zoom-in-zoom-out {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.5, 1.5);
}
100% {
transform: scale(1, 1);
}
}
このコードが何をするかを理解しましょう。
@keyframes
は、アニメーションの段階とスタイルを定義するCSSのアットルール(at-rule)です。zoom-in-zoom-out
は、アニメーションに付けた名前です(後でこの名前を参照します)。0%
(開始時)では、要素は scale(1, 1)
で通常のサイズです。50%
(途中)では、要素は scale(1.5, 1.5)
で通常の1.5倍のサイズに拡大します。100%
(終了時)では、要素は通常のサイズに戻ります。scale()
関数を持つ transform
プロパティは、要素のサイズを変更します。これらのキーフレームを追加した後、style.css
ファイルを保存します。
キーフレームはアニメーションが何をするかを定義しますが、まだ要素に適用していません。次のステップでは、アニメーションをボックスに適用します。
キーフレームを定義したので、アニメーションをボックス要素に適用する必要があります。
style.css
ファイルを開き、.zoom-in-out-box
セレクタを以下のように変更します。.zoom-in-out-box {
margin: 24px;
width: 50px;
height: 50px;
background: #f50057;
animation: zoom-in-zoom-out 1s ease infinite;
}
追加した animation
プロパティを理解しましょう。
animation
は、複数のアニメーションプロパティを一度に設定する省略形のプロパティです。zoom-in-zoom-out
は、キーフレームアニメーションの名前です。1s
は、アニメーションの1サイクルが1秒であることを指定します。ease
は、アニメーションがゆっくり始まり、加速してから再び減速するタイミング関数です。infinite
は、アニメーションが永遠に繰り返されることを意味します。これらの変更を加えた後、style.css
ファイルを保存します。
ウェブサーバーがすでに起動している場合は、単に Web 8080 タブを更新します。起動していない場合は、右下隅の「Go Live」をクリックしてサーバーを起動し、その後 Web 8080 タブを開きます。
これで、ピンクの正方形が滑らかにズームインとズームアウトを繰り返す連続アニメーションが表示されるはずです。正方形は元のサイズの1.5倍になるまで大きくなり、その後通常のサイズに戻ります。このサイクルは無限に繰り返されます。
様々なアニメーションプロパティを試して、アニメーションをカスタマイズしましょう。これにより、これらのプロパティがアニメーションの動作にどのように影響するかを理解するのに役立ちます。
style.css
ファイルを開き、.zoom-in-out-box
セレクタを変更して、異なるアニメーションプロパティを試してみましょう。.zoom-in-out-box {
margin: 24px;
width: 50px;
height: 50px;
background: #f50057;
animation: zoom-in-zoom-out 2s ease-in-out infinite;
/* Add a slight rotation during the animation */
border-radius: 10px;
}
変更点を理解しましょう。
2s
(2秒)に延長しました。ease-in-out
に変更しました。これにより、アニメーションの開始と終了が滑らかになります。border-radius
を10pxに設定して、ボックスの角を丸くしました。キーフレームも変更して、回転効果を追加しましょう。
@keyframes zoom-in-zoom-out {
0% {
transform: scale(1, 1) rotate(0deg);
}
50% {
transform: scale(1.5, 1.5) rotate(45deg);
background-color: #2196f3;
}
100% {
transform: scale(1, 1) rotate(0deg);
}
}
この更新されたキーフレーム定義では:
transform
プロパティに rotate()
関数を追加しました。これらの変更を加えた後、style.css
ファイルを保存します。
Web 8080 タブを更新して、強化されたアニメーションを確認しましょう。
これで、アニメーションは遅くなり(1サイクルに2秒)、角が丸くなり、ズームする際に回転し、アニメーションの途中で色が変わるはずです。これは、CSSアニメーションが複数のプロパティの変更を組み合わせて、豊かな視覚効果を生み出すことができることを示しています。
異なるプロパティと値を自由に試して、アニメーションにどのような影響を与えるかを確認してください。
ズームイン・ズームアウトアニメーションの実験を完了したことをお祝いします!この実験では、以下のことを学びました。
animation
プロパティを使用して要素にアニメーションを適用する方法これらのCSSアニメーション技術は、ユーザーの操作に反応する魅力的なユーザーインターフェイスを作成したり、ウェブページ上の重要な要素に注目を集めたりするために適用できます。
学習を続けるには、animation-delay
、animation-direction
、animation-fill-mode
などの他のアニメーションプロパティを探索することを検討してください。また、transform
以外のさまざまなCSSプロパティ(不透明度、位置、サイズなど)をアニメーション化する実験もできます。