タイトル・URLをコピー
記事タイトル【CSS】アニメーションの基礎知識・使い方・サンプルコード付き(初心者向け)
記事URLhttps://digitor.jp/textbook/css-animation/
記事タイトル【CSS】アニメーションの基礎知識・使い方・サンプルコード付き(初心者向け)
記事URLhttps://digitor.jp/textbook/css-animation/
POINTこの記事をざっくり言うと
アニメーションに必要なプロパティ・値を理解できるようになる。
「animation」「transition」の違い・メリット・デメリットがわかるようになる。
アニメーションを実践的に使用できるようになる。
こんにちは!
WEB制作をはじめて少したったけど、次は「WEBに動きをつけてみたい・・!」「javascriptを覚えないと動きをつけれないのかな・・?」「アニメーションって何・・?」
WEBに動きをつけてみたいと思っている、初心者WEB製作者の方も多いのではないでしょうか?
実はjavascriptを覚えてなくても、CSSのアニメーションで作成できる動きは多数あります!
今回は初心者の方向けに、「CSSアニメーションとは」「animation・transition」「アニメーションに使うプロパティ・値」「アニメーションの記述方法」を中心に詳しく解説していきます。
CSSアニメーションとは
CSSアニメーションとは、下記のように動きをつけれる機能のことです。
javascript不要で、CSSだけで動きをつけることがき、初心者の方も簡単に使う事ができます。
アニメーションを作成する方法は、「transition」「animation」の2通りあります。
transition最大の特徴は「変化のタイミングは1回のみ(hover、マウスオーバーなど)」
animation最大の特徴は「変化のタイミングを指定でき、細かい設定ができる」
簡単だけど、細かい設定をできないのが「transition」
少し難しいけど、細かい設定をできるのが「animation」という理解で今は大丈夫です。
詳しく解説していきます。
transition
マウスオーバーした時に黒色の正方形が赤色に変わります。
HTMLサンプルコード
|
<div class="trantionsample"></div> |
CSSサンプルコード
|
@charset "UTF-8"; .trantionsample{ margin: 30px; width:200px; height:200px; background-color:black; transition: 1s; } /* 色変更 */ .trantionsample:hover{ background-color:red; } |
※解説
変化させたい要素に「transition」を指定し、変化後のデザインを:hover擬似要素で指定します。
今回の例では、黒色の四角形(変化させたい要素)下記コードで作成
|
.transtionsample{ margin: 30px; width:200px; height:200px; background-color:black; transition: 1s; } |
最後の行に「transition: 1s;」を指定、「1s」は1秒間かけて変化するという値。
次にマウスオーバー(:hover)時に変化させたいデザインを下記コードで指定
|
.transtionsample:hover{ background-color:red; } |
背景色を赤に指定。
まとめると、変化させたい要素(黒色四角形)に「transition」指定→マウスオーバー(:hover)した時に変化させたいデザイン(背景色赤)を指定する。
transitionには様々なプロパティ、値を指定する事ができます、つまり『様々な種類の変化を加える事ができる』という事です、下記より紹介していきます。
transitionで指定できるプロパティ・値
transitionで指定できるプロパティ(幅・高さ)
width・height(幅、高さ)プロパティにも変化を加える事ができます。
下記の黒色正方形をマウスオーバーすると、幅・高さも変化します。
HTMLサンプルコード
|
<div class="trantionsample"></div> |
CSSサンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|
@charset "UTF-8"; .trantionsample{ margin: 30px; width:100px; height:100px; background-color:black; transition: 1s; } /* 色 幅・高さ変更*/ .trantionsample:hover{ background-color:red; width: 150px; height: 150px; } |
※解説
変化後(taranstionsample:hover)のデザインに「width:変化させたい値」「hegiht:変化させたい値」を指定する事で変化させる事ができます。
この他にも「transition」にはほとんどのCSSプロパティが指定できます。
例
●color
●font-size
●font-wegiht
●top
●left
●right
●bottom
●margin
●letter-spacing
●box-shadow
transitionで指定できる値 (変化にかかる時間)
transitionには変化にかかる時間を指定する値を設定できます。
下記は3秒かけて変化を指定
HTMLサンプルコード
|
<div class="trantionsample"></div> |
CSSサンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|
@charset "UTF-8"; .trantionsample{ margin: 30px; width:200px; height:200px; background-color:black; transition: 3s; } /* 色 幅・高さ変更*/ .trantionsample:hover{ background-color:red; width: 250px; height: 250px; } |
※解説
transition: 3s;を指定し3秒かけて変化させています。
指定できる値としては、下記となります.
指定できる単位 | 日本語単位 | 指定の仕方 |
s | 秒 | 1s1秒。初期値は0s |
ms | ミリ秒 | 1000msで1秒 |
transitionで指定できるプロパティ(速度)
transitionには変化の速度を指定するプロパティがあります。
下記は変化がゆっくり始まるように速度指定
HTMLサンプルコード
|
<div class="trantionsample"></div> |
CSSサンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|
@charset "UTF-8"; .trantionsample{ margin: 30px; width:100px; height:100px; background-color:black; transition: ease-in 3s; } /* 色 幅・高さ変更*/ .trantionsample:hover{ background-color:red; width: 150px; height: 150px; } |
「ease-in」を指定することで変化の始まりをゆっくりに指定する事ができます。
指定できるプロパティの例としては下記となります。
プロパティ | 速度 |
ease | ゆっくり始まって、ゆっくり終わる |
ease-in | ゆっくり始まる |
ease-out | ゆっくり終わる |
ease-in-out | easeよりゆっくり始まって、ゆっくり終わる |
linear | 一定の速度で始まって終わる |
steps(n) | nの回数だけコマ送りする |
transitionで指定できる値 (変化の開始時間)
transitionには変化の開始時間を指定する「transition-delay」プロパティがあります。
下記はマウスオーバーしてから1秒後に変化が始まるように指定。
サンプルコード表示結果
HTMLサンプルコード
|
<div class="trantionsample"></div> |
CSSサンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
|
@charset "UTF-8"; .trantionsample{ margin: 30px; width:100px; height:100px; background-color:black; transition: ease-in 1s; } /* 色 幅・高さ変更*/ .trantionsample:hover{ transition-delay: 1s; background-color:red; width: 150px; height: 150px; } |
※解説
CSSコード14行目
を指定する事で変化の開始時間を指定する事ができます。
「transition-delay」プロパティは変化の開始時間を指定できるプロパティで、
指定できる値の単位としては下記となります。
指定できる単位 | 日本語単位 | 指定の仕方 |
s | 秒 | 1s1秒。初期値は0s |
ms | ミリ秒 | 1000msで1秒 |
transitionのメリット・デメリット
●メリット
簡単に実装する事ができ、アニメーション初心者には分かりやすく向いている。
●デメリット
細かい設定はできない(アニメーションのループや自動再生)
animation
マウスオーバーしなくても正方形が動き出しています。
ここがtransitionとの大きな違いです。
サンプルコード表示結果
HTMLサンプルコード
|
<div class="animationsample"></div> |
CSSサンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
|
@charset "UTF-8"; .animationsample { margin: 30px; height: 100px; width: 100px; background-color: black; position: relative; animation: example 3s 0s infinite; } @keyframes example { 0% { background-color: red; left: 0; } 100% { background-color: blue; left: 300px; } } |
※解説
animationは「keyframe」で動きを決めます。
keyframeの基本記述方法
上記がkeyframeの基本的な記述方法です。
順番に解説していきます。
|
.animationsample { margin: 30px; height: 100px; width: 100px; background-color: black; position: relative; animation: example 3s infinite; } |
上記コードで黒色の四角形を作成、6行目「position: relative」で四角形の最初の位置を決めます。
次に7行目で、animationを指定させます。
アニメーションを指定するには、
animation : keyflameの名前 変化時間 細かい指定(繰り返しなのかなど)
今回の例では
keyframeの名前→「sample」
変化時間→「3s(3秒で変化)」
細かい設定→「infinite(無限繰り返し)」
を設定
|
@keyframes example { 0% { background-color: red; left: 0; } 100% { background-color: blue; left: 300px; } } |
@keyframes 〇〇→〇〇に指定した名前、今回の例では「example」を指定したので「example」記入
|
0% { background-color: red; left: 0; |
0%〜99%の変化は「背景色赤」
|
100% { background-color: blue; left: 300px; } |
100%の時に「背景色青」「移動右に300px」
まとめると、animationで名前、時間、繰り返し方を設定→keyframesで動き、デザインを決めるといった流れとなります。
keyframesの記述方法
keyframesでの記述方法を詳しく紹介します
●keyframeの基本記述方法
●0%から100%の指定
●最後だけ指定
●細かく指定
アニメーションで指定できる値・プロパティ
animationで指定できる値 (変化にかかる時間)
animationには変化にかかる時間を指定することができます。
今回の例では3秒かけて変化させました。
|
animation: example 3s infinite; |
指定できる値としては、下記となります。
指定できる単位 | 日本語単位 | 指定の仕方 |
s | 秒 | 1s1秒。初期値は0s |
ms | ミリ秒 | 1000msで1秒 |
animationで指定できるプロパティ(速度)
animationには変化の速度を指定するプロパティがあります。
|
animation: example ease-in 1s infinite; |
今回は「ease-in」を指定しました。
指定できるプロパティの例としては下記となります
プロパティ | 速度 |
ease | ゆっくり始まって、ゆっくり終わる |
ease-in | ゆっくり始まる |
ease-out | ゆっくり終わる |
ease-in-out | easeよりゆっくり始まって、ゆっくり終わる |
linear | 一定の速度で始まって終わる |
steps(n) | nの回数だけコマ送りする |
animationで指定できる値 (変化の開始時間)
animationで変化の時間を指定する際は
|
animation: example ease-in 1s 3s infinite; |
変化時間の隣に記述してください。上記例だと3s(3秒後に変化開始)
animationで指定できる値 (回数・ループ指定)
animationでは再生回数を指定する事ができます。
|
animation: example ease-in 1s 3s infinite; |
1→(初期値)
infinte→無限ループ
animationで指定できる値 (再生方向)
animationでは再生方向を指定する事ができます。
|
animation: example ease-in 1s alternate-reverse infinite; |
指定できる値は下記となります。
プロパティ | 動き |
narmal | 通常方向(初期値) |
alternate | 通常方向と、逆方向を繰り返す |
reverse | 毎回逆方向を実行する |
alternate-reverse | 通常方向と、逆方向を繰り返す |
animationで指定できる値 (実行前・後の状態)
animationでは実行前・後の状態を指定する事ができます。
|
animation: example ease-in 1s forwards infinite; |
指定できるプロパティの例としては下記となります。
プロパティ | 意味 |
none | 初期値 |
forwards | 再生後も、@keyframes(100%)のスタイルが適用される。 |
backwards | 再生前は、@keyframes(0%)のスタイルが適用される。 |
both | 再生前は@keyframes(0%)、再生後は@keyframes(100%)のスタイルが適用される |
animationで指定できる値 ( 一時停止・再生指定)
animationでは一時停止・再生指定の状態を指定するanimation-play-state
プロパティを指定する事ができます。
指定できる値の例としては下記となります。
プロパティ | 動き |
running | 再生 |
paused | 一時停止 |
animationのメリット・デメリット
●メリット
詳細設定ができ、連続したアニメーションを作成できる
●デメリット
詳細設定ができるが「transtion」より覚える事が多く少し難易度が高い
transitionサンプルコード
ご自身のコードにコピペで貼り付け、色や秒数などの値を変えてみてください。
色が変わり動くボタン
HTMLサンプルコード
|
<button class="trasitionsample" href="">button</button> |
CSSサンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
|
@charset "UTF-8"; .trasitionsample { width: 100px; text-align: center; padding: 15px; font-size: 20px; color: #fff; background-color: red; border-radius: 10px; transition: 0.5s; margin: 30px; } .trasitionsample:hover { background-color: blue; width: 150px; } |
回転させる
マウスオーバー時に「transform: rotate(360deg);」を指定し回転させます。
HTMLサンプルコード
|
<div class="trantionsample">回転</div> |
CSSサンプルコード
|
@charset "UTF-8"; .trantionsample { width: 200px; height:200px; line-height: 200px; text-align: center; margin: 50px; background-color: orange; color: #ffffff; transition: 0.5s; } .trantionsample:hover { transform: rotate(360deg); } |
animationサンプルコード
文字が浮かび上がってくる
サンプルコード表示結果
HTMLサンプルコード
|
<p class="animationsample">文字が浮かんでくる</p> |
CSSサンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
|
@charset "UTF-8"; .animationsample { position: relative; animation: sample 3s ease; margin: 50px; font-size: 50px; } @keyframes sample { 0% { opacity: 0; top: 200px; } 100% { opacity: 1; top: 0; } } |
ボールがバウンドする
transform: translateY;を使用しバウンドを作成します。
HTMLサンプルコード
|
<div class="animationsample"></div> |
CSSサンプルコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
|
@charset "UTF-8"; .animationsample { margin: 0 auto; background-color: red; border-radius: 50%; width: 100px; height: 100px; animation: sample 1s ease-in infinite alternate; } @keyframes sample { 0% { transform: translateY(100%); } 100% { transform: translateY(250%); } } |
まとめ
今回は、「CSSアニメーションとは」「animation・transition」「アニメーションに使うプロパティ・値」「アニメーションの記述方法」を中心に解説してきました。
1.CSSアニメーションとは「javascript」不要でWEBに動きをつける事ができ、
「transition」「animation」の2通の作成方法がある
2.「transition」は主に変化させたい要素に「transition」を指定し、
変化後のデザインを:hover擬似要素で指定する
3.「animation」は「keyframe」を使用し動きを指定する
いかがだったでしょうか?
アニメーションはCSSの中でも難易度が高く、むずかし感じたかもしれませんが「javascript」使用せず、動きをつけることができるので、とても便利です、これを機会に学習してみて下さい。
WordPressでバックアップをとる方法【タイミング/用途別で解説】
バックアップの必要性とWordPressでバックアップをおこなうやり方を紹介します。
【最短】WordPress(ワードプレス)で問合せフォームを設置する方法
お問い合わせフォームをWordPressで簡単に設定する方法やカスタマイズする方法を解説します。
【WordPressの基礎・始め方】半日でゼロからブログを立ち上げる方法
今までサイトを開設した事がない人でも簡単にできる、WordPressを活用したブログの立ち上げ方を紹介します。
最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。
この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします
minweb編集部(株)セルリア
”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。
タイトル・URLをコピー
記事タイトル【CSS】アニメーションの基礎知識・使い方・サンプルコード付き(初心者向け)
記事URLhttps://digitor.jp/textbook/css-animation/
記事タイトル【CSS】アニメーションの基礎知識・使い方・サンプルコード付き(初心者向け)
記事URLhttps://digitor.jp/textbook/css-animation/
こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料
Googleサーチコンソール使い倒し活用術 <AOHON>
Googleの検索エンジンに関する情報を幅広く確認できるツール「Googleサーチコンソール」の活用方法をまとめました。新サーチコンソールの機能を網羅的に紹介するだけでなく、Webサイトを最適化できる実践的な方法までわかりやすく解説します。
サーチコンソール初心者の方が知りたい導入方法から、上級者向けのコンテンツ改善の方法まで、押さえておきたい要素を1つに集めた、SEOに力を入れたいすべてのWeb担当者におすすめの一冊です。