アニメーション関連のCSSプロパティ
この記事ではアニメーション関連のCSSプロパティについて説明します。
@keyframesやanimation、transitionプロパティについて、利用用途や記述の仕方を学べます。
YouTube Video
プレビュー用のHTML
css-animation.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-animation.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Animation</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>Animation Related Properties</h2>
20 </header>
21 <article>
22 <h3>@keyframes</h3>
23 <section>
24 <h4>Animation Examples</h4>
25 <header><h4>animation: slide 3s ease infinite</h4></header>
26 <section class="sample-view">
27 <div class="box-animation-slide">Slide Box</div>
28 </section>
29 <header><h4>animation: color-change 3s ease infinite</h4></header>
30 <section class="sample-view">
31 <div class="box-animation-color-change">Color Change Box</div>
32 </section>
33 <header><h4>animation: fade 3s ease infinite</h4></header>
34 <section class="sample-view">
35 <div class="box-animation-fade">Fade Box</div>
36 </section>
37 </section>
38 </article>
39 <article>
40 <h3>animation</h3>
41 <section>
42 <h4>Animation Examples</h4>
43 <header><h4>animation: slide 3s ease-in-out infinite</h4></header>
44 <section class="sample-view">
45 <div class="box-animation-ease-in-out">Slide Box</div>
46 </section>
47 <header><h4>animation: color-change 3s ease-in-out 1s 3 alternate</h4></header>
48 <section class="sample-view">
49 <div class="box-animation-alternate">Color Change Box</div>
50 </section>
51 </section>
52 </article>
53 <article>
54 <h3>transition</h3>
55 <section>
56 <h4>Transition Examples</h4>
57 <header><h4>transition: background-color 2s ease</h4></header>
58 <section class="sample-view">
59 <div class="transition-box">Hover me!</div>
60 </section>
61 <header><h4>transition: background-color 5s ease, width 0.5s ease-in</h4></header>
62 <section class="sample-view">
63 <div class="transition-2-properties">Hover me!</div>
64 </section>
65 </section>
66 </article>
67 </main>
68</body>
69</html>アニメーション・トランジション
@keyframesルール
1/* Animation definition */
2@keyframes slide {
3 0% {
4 transform: translateX(0);
5 }
6 50% {
7 transform: translateX(200px);
8 }
9 100% {
10 transform: translateX(0);
11 }
12}
13
14/* Apply the animation */
15.box-animation-slide {
16 width: 100px;
17 height: 100px;
18 background-color: skyblue;
19 animation: slide 3s ease infinite;
20}@keyframesは、CSSアニメーションにおいて、アニメーションの途中でスタイルがどのように変化するかを指定するために使われます。@keyframes では、アニメーションの開始から終了までのスタイルの変化を時間の割合（パーセンテージ）またはキーワード（fromやto）で指定します。
- これは要素が左から右へスライドし、元の位置に戻るアニメーションを定義した例です。
- この例では、
@keyframesの後にslideと記述し、slideという名前のアニメーションを定義しています。 0%はアニメーションの開始時点で、translateX(0)により要素は元の位置にあります。50%はアニメーションの途中で、要素はtranslateX(200px)によって右に200px移動します。100%はアニメーションの終了時点で、要素は再び元の位置に戻ります。box-animation-slideクラスでは、animationプロパティによって、3秒間隔でslideアニメーションを適用するようにしています。
1@keyframes color-change {
2 0% {
3 background-color: red;
4 }
5 25% {
6 background-color: blue;
7 }
8 50% {
9 background-color: green;
10 }
11 75% {
12 background-color: yellow;
13 }
14 100% {
15 background-color: red;
16 }
17}
18
19.box-animation-color-change {
20 width: 100px;
21 height: 100px;
22 background-color: skyblue;
23 animation: color-change 3s ease infinite;
24}- アニメーションの途中のスタイルを細かく制御できます。パーセンテージで指定することにより、任意のタイミングで異なるスタイルを適用できます。
- この例では、赤、青、緑、黄色、赤と段階的に色が変わります。
1@keyframes fade {
2 from {
3 opacity: 0;
4 }
5 to {
6 opacity: 1;
7 }
8}
9
10.box-animation-fade {
11 width: 100px;
12 height: 100px;
13 background-color: blue;
14 animation: fade 3s ease infinite;
15}- この例のように
fromは0%に相当し、toは100%に相当します。これにより、簡単なアニメーションを定義できます。
基本構文
1@keyframes animation-name {
2 0% {
3 /* Style at the start */
4 }
5 50% {
6 /* Style at the midpoint */
7 }
8 100% {
9 /* Style at the end */
10 }
11}animation-name: アニメーションの名前です。これは、animationプロパティやanimation-nameプロパティで指定されます。- パーセンテージまたはキーワード:
0%から100%までの割合、もしくはキーワードのfrom（0%と同じ）やto（100%と同じ）を使います。
animation プロパティ
1.box-animation-ease-in-out {
2 width: 100px;
3 height: 100px;
4 background-color: skyblue;
5 animation: slide 3s ease-in-out infinite;
6}animation プロパティは、要素にアニメーションを適用するために使用されます。アニメーションは、指定した一連の CSS スタイルが時間の経過とともにどのように変化するかを定義します。animation プロパティを使用することで、アニメーションのタイミング、動作、遅延、反復回数などを制御できます。
box-animation-ease-in-outクラスでは、animation-nameとしてslideが指定されており、@keyframesで定義されたslideアニメーションが使用されます。3sはanimation-durationで、1サイクルのアニメーションが3秒間で完了します。ease-in-outはanimation-timing-functionで、アニメーションの進行速度をゆっくり開始して加速し、最後に再び減速する効果があります。infiniteはanimation-iteration-countで、アニメーションが無限に繰り返されます。
1.box-animation-alternate {
2 width: 100px;
3 height: 100px;
4 background-color: skyblue;
5 animation: color-change 3s ease-in-out 1s 3 alternate;
6}box-animation-alternateクラスでは、animation-nameとしてcolor-changeが指定されており、@keyframesで定義されたcolor-changeアニメーションが使用されます。ease-in-outの後の1sはanimation-delayで、アニメーションの開始までの遅延時間を指定しています。1秒後にアニメーションが開始されます。1sの後の3はanimation-iteration-countで、3回アニメーションが繰り返されます。alternateはanimation-directionで、アニメーションの再生方向を指定しています。alternateによって交互に再生されるように指定しています。
animation プロパティの構成
animationプロパティは、複数のサブプロパティを一つにまとめたショートハンドプロパティです。以下は主なサブプロパティです。
animation-nameプロパティ: 適用するアニメーションの名前を指定します。@keyframesで定義したアニメーションの名前と一致させる必要があります。animation-durationプロパティ: アニメーションが1サイクルを完了するまでの時間を指定します。時間の単位は秒（s）またはミリ秒（ms）です。animation-timing-functionプロパティ: アニメーションの進行速度を指定します。値としてease、linear、ease-in、ease-out、ease-in-outなどが使用されます。easeを指定すると、ゆっくり始まり、途中で速くなり、最後にまたゆっくり終わります。linearを指定すると、最初から最後まで同じ速度で進行します。ease-inを指定すると、ゆっくり始まり、速く終わります。ease-outを指定すると、速く始まり、ゆっくり終わります。ease-in-outを指定すると、ゆっくり始まり、速く進み、ゆっくり終わります。
animation-delayプロパティ: アニメーションの開始までの遅延時間を指定します。時間の単位は秒またはミリ秒です。animation-iteration-countプロパティ: アニメーションを繰り返す回数を指定します。infiniteを指定すると無限に繰り返されます。animation-directionプロパティ: アニメーションの再生方向を指定します。normal（通常の方向）、reverse（逆方向）、alternate（交互に再生）、alternate-reverse（逆方向から交互に再生）などがあります。animation-fill-modeプロパティ: アニメーションが終了した後や開始前の状態を指定します。none、forwards、backwards、bothのいずれかを指定できます。animation-play-stateプロパティ: アニメーションが再生中か一時停止中かを指定します。runningまたはpausedを指定できます。
まとめ
animationプロパティは、要素のスタイルを動的に変更する強力な手段です。@keyframesを使って、スタイルが時間とともにどのように変化するかを定義し、animationの各サブプロパティでアニメーションの詳細な動作を制御できます。
transition プロパティ
1.transition-box {
2 background-color: lightgray;
3 transition: background-color 2s ease;
4}
5
6.transition-box:hover {
7 background-color: steelblue;
8}
9
10.transition-2-properties {
11 background-color: lightgray;
12 width: 150px;
13 height: 50px;
14 transition: background-color 5s ease, width 0.5s ease-in;
15}
16
17.transition-2-properties:hover {
18 background-color: blue;
19 width: 250px;
20}transition プロパティは、CSSのスタイル変更にアニメーション効果を適用するために使用されます。hoverやfocus、activeなどの状態変化や、JavaScriptでスタイルを動的に変更した際に、その変更が滑らかに見えるようにアニメーション効果を付けることができます。
ボタンをホバーすると、背景色が滑らかに変化するtransition-boxクラスの例を見てみましょう。
- transition-boxクラスでは、transitionプロパティによって、背景色の変化に対して2秒のトランジションが適用されます。変化の仕方はeaseとして指定されており、滑らかに行われます。
- hover擬似クラスによって、マウスがボタン上に来たときに背景色がlightgrayからsteelblueに変化します。この変更は、transition-boxクラスで指定された2秒の間に滑らかに行われます。
複数のプロパティに対して transition を同時に適用することも可能です。
- transition-2-propertiesクラスの例では、背景色は5秒で変わり、幅は0.5秒で変わります。
基本構文
1/* Basic syntax of transition */
2transition: property duration timing-function delay;propertyには、どのCSSプロパティに対してアニメーションを適用するかを指定します。allを指定すると、すべてのプロパティがアニメーションの対象となります。durationには、アニメーションが完了するまでの時間を指定します。秒（s）またはミリ秒（ms）で指定します。timing-functionには、アニメーションの速度の変化を指定します。ease,linear,ease-in,ease-out,ease-in-outなどが使用できます。delayには、アニメーションが開始されるまでの遅延時間を指定します。秒またはミリ秒で指定します。
transition の詳細プロパティ
1/* Detailed properties of transition */
2transition-property: background-color;
3transition-duration: 0.3s;
4transition-timing-function: ease;
5transition-delay: 500ms;transition は以下のように個別のプロパティとしても使用できます。
transition-property: アニメーションを適用するプロパティを指定します。transition-duration: アニメーションが完了するまでの時間を指定します。transition-timing-function: アニメーションの進行速度を指定します。ease,linear,ease-in,ease-out,ease-in-outなどが使用できます。transition-delay: アニメーションが開始するまでの遅延時間を指定します。
YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。