◆当サイトで人気のプログラミング教室のおすすめランキングはこちら！
プログラミングは独学では非効率で、時間を無駄にするリスクがあります。効率的なカリキュラムで学べるスクールを受講しましょう。
Web Camp←【マンツーマンサポート】1ヶ月短期集中でプログラミングを学ぶスクール
TechAcademy
Tech Camp
WebCampProプログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
8月受入枠は満員となっております。9月枠に向け、お早めの申込みをオススメします。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！
みなさんはCSSの学習をしていませんか？
CSSを学習する時に「アニメーション」が使えると、動きのあるサイトを作成することができます。
今回の記事ではアニメーションの使い方を解説します！
CSS アニメーションとは
CSSのanimation プロパティと @keyframes を使うと、CSSだけでアニメーションの設定ができます。
CSSのみで比較的簡単にアニメーションを実装できるのでおすすめです。
以下に機能の内容をご紹介していきます。
アニメーションとは動きを付ける、変化させるということ
アニメーションとなるとそのまま動画のイメージが一般的かと思いますが、CSSでのアニメーションとは、動作または状態変化という意味になります。
Keyframeとは
@keyframes は、アニメーション開始から終了するまでどのようなアニメーションをするのか指定するものです。
@keyframes は、以下のように記述します。
@keyframes 名称 {
0% {
CSSプロパティ:値;
}
100% {
CSSプロパティ:値;
}
}
名称は任意です。使用する際に直感的にわかりやすい名前をお勧めします。
0% はアニメーション開始時を表しており、100% はアニメーション終了時を表しています。その波括弧の中にCSSプロパティを記述して、アニメーションを指定します。
keyframeの開始と終了の指定
0% と 100% の記述は必須ではありません。アニメーションの開始から終了までの経過を 0% から 100% で指定できます。
また、アニメーション開始時を 0% 、アニメーション終了時を 100% と記述していましたが、from と to と記述することもできます。
from は 0% を表し、to は 100% を表します。
animationとは
@keyframes で指定したアニメーションは、あくまでアニメーションそのものの定義であって、なにかに適用するためにはanimation プロパティで指定します。
animation プロパティでは、どのアニメーションを適用するのか、適用したアニメーションはいつ開始されるのか、開始されてから終了するまでの時間、アニメーションの繰り返し回数などを指定することができます。
２つに分かれている意味
@keyframes ではアニメーションのみを指定し、animation プロパティで適用するアニメーションやアニメーションの時間などを指定します。
なぜ１つに統合しないのかというと、例えばアニメーションの動作は一緒でも、フェードイン、フェードアウトなどのアニメーションでその時間だけを場面により変えたい場合にkeyframeはそのままでanimationプロパティを複数用意するだけでよくなります。
動作定義と適用対象及び適用時間は分けてあった方が何かと便利です。
animation プロパティの種類
animation-name
アニメーションの名前、つまり使用するkeyframeの名前を指定します。
animation-duration
アニメーションが始まって終わるまでの時間を指定します。時間を指定する単位は 秒数（s） または ミリ秒数（ms） になります。
animation-timing-function
アニメーションの進行の度合いを指定します。進行度合いとは、アニメーション開始時から終了時までの変化速度を一定にしたり不定期にしたりということです。
指定できる値は、
ease（緩やかに一定）
ease-in（緩やか => 早く)
ease-out(早く => 緩やか）
ease-in-out（かなり緩やか）
linear（一定）
などがあります。
任意で変化の度合いを指定するときは、cubic-bezier で指定します。
animation-delay
アニメーションが始まる時間を指定します。時間を指定する単位は 秒数（s） または ミリ秒数（ms） になります。
animation-iteration-count
アニメーションの繰り返し回数を指定します。アニメーションを無限に繰り返したい場合は、値に infinite を指定します。
animation-direction
アニメーションの再生方向を指定します。
normal
毎回、指定した通り（順方向）のアニメーションが再生されます。
reverse
毎回、逆方向からのアニメーションが再生されます。
alternate
順方向、逆方向のアニメーションを交互に繰り返します。
alternate-reverse
逆方向、順方向のアニメーションを交互に繰り返します。
animation-fill-mode
アニメーションの開始前、終了後のスタイルを指定します。
none
アニメーションで指定したスタイルは、アニメーションの開始前、終了後には適用されません。
forwards
アニメーション終了時のスタイルがアニメーション終了後にも適用されます。
backwards
アニメーション開始時のスタイルがアニメーション開始前にも適用されます。
both
forward と backwards の両方が適用されます。
animation-play-state
アニメーションの再生・停止を指定します。
running
アニメーションが実行されます。
paused
アニメーションが停止されます。
animation
上記、8つのプロパティを一括で指定できます。
ただし、animation-duration と animation-delay の2つのプロパティは両方とも秒数で指定するため、最初に記述した秒数が animation-duration で、次に記述した秒数が animation-delay と解釈されます。
サンプル
<!DOCTYPE html>
<html>
<head>
<title>line-height</title>
<style type="text/css">
@keyframes fadeIn {
from {
opacity:0;
}
to {
opacity:1;
}
}
@keyframes fadeOut {
from {
opacity:1;
}
to {
opacity:0;
}
}
.abc {
width: 50px;
height: 50px;
background: #ef0000;
animation: fadeIn 3s, fadeOut 3s 5s forwards;
}</style>
</head>
<body>
<div class="abc"></div>
</body>
</html>
まとめ
初心者の方向けにfloatを紹介していきましたが、いかがでしたか？
floatを上手に使いこなせることはWebサイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね！
１ヶ月でHTML・CSSができる！「WebCamp」とは？
WebCampは１ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。
参加する方の90%は未経験者です！
短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです！
わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。
学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください！
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコース。
7月受入枠は満員となっております。8月枠に向け、お早めの申込みをオススメします。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！
▼未経験から1ヶ月でWebデザイン・プログラミングを学びたい方はこちら！
▼ついに開講！オンラインでWebデザインを学びたい方はこちら！
