WebCamp・WebCampProを運営する株式会社インフラトップのオウンドメディア【スキルマ】。プログラマー・エンジニア・Webデザイナーを目指す初心者の方に向けた記事や、就職・転職を考えている方向けの記事を発信しています。

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

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

順位 スクール名 こんな方におすすめ 公式サイト
   Web Camp 【業界最安値】1ヶ月通い放題/Webサービスなど作りたい方 公式サイト 
  TECH BOOST ブロックチェーン/AI/IoTコースあり/3ヶ月でエンジニアに! 公式サイト
Tech Camp Webデザイン/AI(人工知能)/IOS/Androidアプリ制作/VRを学びたい方! 公式サイト
▼本記事について
本記事は、『たった1ヶ月で未来を変えられる』初心者向けプログラミングスクール「WebCamp(ウェブキャンプ)や、未経験者でも3ヶ月の学習でエンジニアに転職・就職ができる「WebCampPro(ウェブキャンププロ)」を運営してる株式会社インフラトップが提供しています。

みなさんは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 プロパティでは、どのアニメーションを適用するのか、適用したアニメーションはいつ開始されるのか、開始されてから終了するまでの時間、アニメーションの繰り返し回数などを指定することができます。

2つに分かれている意味

@keyframes ではアニメーションのみを指定し、animation プロパティで適用するアニメーションやアニメーションの時間などを指定します。

なぜ1つに統合しないのかというと、例えばアニメーションの動作は一緒でも、フェードイン、フェードアウトなどのアニメーションでその時間だけを場面により変えたい場合に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サイトを作成する上で基本となる部分ですので、しっかり基本を抑えてくださいね!

1ヶ月でHTML・CSSができる!「WebCamp」とは?

WebCampは1ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。

参加する方の90%は未経験者です!

短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです!

わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。

学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください!

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

▼IT未経験からエンジニアに就職・転職したい方はこちら!