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

2018年02月01日 2018年02月01日

WebCamp運営事務局

プログラミング教室・人気ランキング

順位	スクール名	こんな方におすすめ
	Web Camp	【業界最安値】1ヶ月通い放題/Webサービス等作りたい方転職保証コースはこちら
	TechAcademy	オンラインでどこでも学べる！/教室に行くのが忙しい人でも安心！
	Tech Camp	Webデザイン/AI(人工知能)/IOS/Androidアプリ制作/VRを学びたい方！

【まもなく定員オーバー】当社人気の転職保証コース
プログラミング学習から転職成功まで導く、当社人気のWebCamp Proコースの5月受入枠も残りわずかとなりました。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！

転職保証コースはこちら！

みなさんはCSSの学習をしていませんか？

CSSを学習する時に「アニメーション」が使えると、動きのあるサイトを作成することができます。

今回の記事ではアニメーションの使い方を解説します！

▼目次

1 CSS アニメーションとは
2 animationとは
3 サンプル
4 まとめ

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>