【CSS】@keyframesを使って簡易なアニメーションを作る！
HTMLで簡易なアニメーションを作成するにはCSSの＠keyframesを使用します。
＠keyframesとはアニメーションの動きを指定することができる特別な書式であり、＠keyframesにanimationプロパティを使用することで時間軸のどのタイミングでどのプロパティをどのように変化させるかを指定することでアニメーションを作成することができます。
今回は、＠keyframesを使って簡易なアニメーションを作成する方法について以下の内容で解説していきます。
⚫︎ 要素の色を変えるアニメーションを作成する場合
⚫︎ 要素の長さを変えるアニメーションを作成する場合
⚫︎ 要素をふわりと出現させるアニメーションを作成する場合
⚫︎ 要素を回転させるアニメーションを作成する場合
⚫︎ 要素の立体的なアニメーションを作成する場合
目次
＠keyframesとは
＠keyframesとは、アニメーションの動きを指定することができる特別な書式であり、要素にアニメーションをつけたい場合は＠keyframesの中に記述します。
＠keyframesの書き方
＠keyframesの書き方は下記となります。
|
1 2 3 4 5 6 7 8 9 |
＠keyframes セレクター { 0% { プロパティ: 値; } 100% { プロパティ: 値; } } |
プロパティの値を変化させるタイミングの「%」は自由ですが「0%」と「100％」は必ず指定する必要があります。
0%は「from」、100%は「to」と書くことも可能です。
また書くタイミングで指定するプロパティの数は自由です。
＠keyframesだけではアニメーションは動かない
＠keyframesだけではアニメーションが動きません。
なぜなら、＠keyframesはアニメーションをつける書式だからです。
アニメーションを動かすようにするにはanimationプロパティを使用する必要があります。
＠keyframesとanimationプロパティを使用することで時間軸のどのタイミングでどのプロパティをどのように変化させるかを指定することができ、アニメーションを作成することができます。
基本的なアニメーションのサンプルコード
基本的なアニメーションのサンプルコードを紹介します。
要素の色を変えるアニメーションを作成する場合
＠keyframesとanimationプロパティを使用して色を変えるアニメーションを作成します。
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>テスト</title> <meta name="description" content="テスト中"> </head> <body> <div class= "colorChange"> 背景の色が変わります。 </div> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
.colorChange { width: 200px; height: 200px; border: 2px solid black; text-align: center; animation-name: colorChange1; animation-duration: 5.0s; animation-iteration-count: infinite; font-size: 15px; color: white; } @keyframes colorChange1 { 0% { background-color: red; } 100% { background-color: blue; } } |
出力結果
＠keyframesとanimationプロパティを使用し、要素の背景色が変わるアニメーションを作成しています。
要素の長さを変えるアニメーションを作成する場合
＠keyframesとanimationプロパティを使用して要素の長さを変えるアニメーションを作成します。
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>テスト</title> <meta name="description" content="テスト中"> </head> <body> <div class= "widthChange1"> 要素の長さが変わります。 </div> <div class= "widthChange2"> 要素の長さが変わります。 </div> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
.widthChange1 { width: 500px; height: 50px; border: 2px solid black; text-align: center; animation-name: widthChangeA; animation-duration: 5.0s; animation-iteration-count: infinite; font-size: 15px; color: white; background-color: red; } .widthChange2 { width: 300px; height: 50px; border: 2px solid black; text-align: center; animation-name: widthChangeB; animation-duration: 5.0s; animation-iteration-count: infinite; font-size: 15px; color: white; background-color: blue; margin-top: 20px; } @keyframes widthChangeA { 0% { width: 0%; } 100% { width: 100%; } } @keyframes widthChangeB { 0% { width: 0%; } 100% { width: 50%; } } |
出力結果
＠keyframesとanimationプロパティを使用し、要素の長さを変えるアニメーションを作成しています。
要素をふわりと出現させるアニメーションを作成する場合
＠keyframesとanimationプロパティを使用して要素をふわりと出現させるアニメーションを作成します。
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>テスト</title> <meta name="description" content="テスト中"> </head> <body> <div class= "hiddenA"> 要素が現れます。 </div> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.hiddenA { width: 150px; height: 150px; text-align: center; animation-name: hidden1; animation-duration: 5.0s; animation-iteration-count: infinite; margin-top: 15px; margin-left: 90px; background-color: red; border: 2px solid black; color: white; } @keyframes hidden1 { from { opacity: 0; } 50% { opacity: 0.5; } to { opacity: 1; } } |
出力結果
＠keyframesとanimationプロパティを使用し、要素をふわりと出現させるアニメーションを作成しています。
要素を回転させるアニメーションを作成する場合
＠keyframesとanimationプロパティを使用して要素の長さを変えるアニメーションを作成します。
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>テスト</title> <meta name="description" content="テスト中"> </head> <body> <div class= "spin1"> 要素が回転します。 </div> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.spin1 { width: 200px; height: 200px; border: 2px solid black; text-align: center; animation-name: spinA; animation-duration: 5.0s; animation-iteration-count: infinite; font-size: 15px; color: white; margin-top: 20px; margin-left: 50px; } @keyframes spinA { 0% { background-color: red; transform: scale(1) rotate(72deg); } 25% { background-color: blue; transform: scale(1) rotate(144deg); } 75% { background-color: blue; transform: scale(1) rotate(216deg); } 75% { background-color: yellow; transform: scale(1) rotate(288deg); } 100% { background-color: green; transform: scale(1)rotate(360deg); } } |
出力結果
＠keyframesとanimationプロパティを使用し、要素が回転するアニメーションを作成しています。
要素を立体的に回転するアニメーションを作成する場合
＠keyframesとanimationプロパティを使用して要素の立体的なアニメーションを作成します。
sample.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>テスト</title> <meta name="description" content="テスト中"> </head> <body> <div class= "spin2"> <img src="https://flytech.work/wp-content/uploads/2020/10/https___freeillust-classic.com_wp-content_uploads_2018_12_0101070006-300x300.png" alt="" width="300" height="300" class="alignnone size-medium wp-image-16567" /> </div> </body> </html> |
style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.spin2 { width: 100px; height: 100px; text-align: center; animation-name: spinB; animation-duration: 5.0s; animation-iteration-count: infinite; margin-left: 150px; } @keyframes spinB { 0% { transform: perspective(480px) rotateY(0deg); } 50% { transform: perspective(480px) rotateY(180deg); } ransform: scale(1) rotate(288deg); } 100% { transform: perspective(480px) rotateY(360deg); } } |
出力結果
＠keyframesとanimationプロパティを使用し、要素が立体的に回転するアニメーションを作成しています。
今回のポイント
@keyframesでアニメーションを作成
⚫︎ ＠keyframesとはアニメーションの動きを指定することができる特別な書式である
⚫︎ ＠keyframesは「0%」と「100％」は必ず指定する必要があり、0%は「from」、100%は「to」と書くことも可能である
⚫︎ ＠keyframesとanimationプロパティを使用することで時間軸のどのタイミングでどのプロパティをどのように変化させるかを指定することができ、アニメーションを作成することができる
ST
株式会社flyhawkのSTです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語：swift、JS系(Node.js等)。好きなサーバー：AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。
