CSS
学習

【CSS初心者入門】アニメーションとは？サンプルも紹介！

【3月生募集中！】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP（旧WEBCAMP PRO）。
2月生は満員となっております。3月生募集に向け、お早めの申込みをオススメします。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！
転職保証コースはこちら！

みなさんは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スキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください！

【3月枠も残りわずか】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP（旧WEBCAMP PRO）。
2月受入枠は満員となっております。3月枠に向け、お早めの申込みをオススメします。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！
転職保証コースはこちら！

▼未経験から1ヶ月でWEBデザイン・プログラミングを学びたい方はこちら！

無料説明会に申し込む(DMM WEBCAMP ビジネス教養コース)

おすすめの記事