CSSでアニメーション作り – animationプロパティの使い方

アニメーションを作ることができる animation プロパティの使い方メモです。

animation プロパティの書き方

アニメーション関連のCSSプロパティはさまざまあります。

animation-duration1回のアニメーションの再生時間。
【初期値】0s
animation-timing-functionアニメーションのイージング(再生速度の変化)。
【初期値】ease
animation-delayアニメーションが開始されるまでの時間。
【初期値】0s
animation-iteration-countアニメーションを繰り返す回数。
【初期値】1
animation-directionアニメーションの再生順序。
【初期値】normal
animation-fill-modeアニメーション開始前と終了後のスタイル。
【初期値】none
animation-play-stateアニメーションの再生と停止。
【初期値】running
animation-nameアニメーション名。keyframes で設定した名前。
【初期値】none
animation-timelineアニメーションの進行制御。(2024年1月時点では実験的な機能
【初期値】view()

これらの値を一括で指定できるのがanimationプロパティです。animationプロパティで一括で指定でも、上記のプロパティをそれぞれ使用してもOK。

各プロパティごとに個別で指定

.selector {
  animation-name: animation_name;
  animation-delay: .3s;
  animation-timing-function: ease/linear/ease-in/ease-out/ease-in-out/cubic-bezier;
}

animationプロパティで一括指定

一括指定する場合は半角スペースでそれぞれの値を区切ります。全てのアニメーションプロパティを指定する必要はなく、省略されたものは初期値に設定されます。

.selector {
  animation: 1s cubic-bezier(0.165, 0.84, 0.44, 1) .3s infinite animation_name;
}

記述順序が入れ替わっても動作することはありますが、順序が重要になる部分もあります。以下の順序が基本です。

duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name

一括指定は記述が少なく慣れていればどの指定をしているか理解できると思いますが、あまり慣れていないとコードの読み取りが難しいことも。特定の内容だけ変更したい場合はもちろん、慣れていないうちは各プロパティで指定した方が分かりやすいとは思います。

アニメーションを複数指定

各アニメーションの設定をカンマ「 , 」で区切れば、複数のアニメーションを指定することもできます。

.selector {
  animation: 1s ease-in .3s infinite animation_name, 1s ease-in .3s infinite animation_name02;
}

keyframes

animationプロパティを使用する際に欠かせないのが @keyframes です。こちらにアニメーションの名前とどのような動きをさせるかを設定します。

【keyframes の書き方】

@keyframes animation_css {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
@keyframes アニメーション名 {変化させる動き}

最初と最後だけの動きを指定する場合は 「from, to」で指定してもOK。

@keyframes animation_css {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

3つ以上で細かく動きを指定したい場合は「%」を使用します。

animation の使用例

簡単で汎用的なアニメーションの実装例を2つほど。

要素の背景が変化するアニメーション

【サンプルCSSコード】

.change_box_color {
  background-color: black;
  width: 50px;
  height: 50px;
  animation-name: animation_box_color;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes animation_box_color {
  0% {
    background-color: green;
  }
  50% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

要素の背景が緑・赤・青と変化するCSSコード例です。animation-duration で 3s を指定しているので、3秒の間に3色の背景に切り替わります。animation-iteration-count: infinite; を指定して無限に繰り返すようにもしています。

背景のグラデーションカラーがすこしずつ色が変化していくこちらのコードも参考になります。
CSS Mood Lighting

無限スライドのように流れるアニメーション

【サンプルCSSコード】

.animation_loop_text_wrap {
  display: flex;
  overflow: hidden;
  max-width: 500px;
  margin: 0 auto;
  white-space: nowrap;
}
.loop_text {
  font-size: 20px;
  display: inline-block;
  animation: 5s infinite linear .1s both animation_loop_slide;
  padding: 1rem;
}

@keyframes animation_loop_slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

【サンプルHTMLコード】

<div class="animation_loop_text_wrap">
  <p class="loop_text">テキストが流れますテキストが流れます</p>
  <p class="loop_text">テキストが流れますテキストが流れます</p>
  <p class="loop_text">テキストが流れますテキストが流れます</p>
</div>

ループさせる要素を複数用意し、横並びにします。
今回はブロック要素に display: flex; を使用しましたが、横並びになるようなスタイルの当て方であればOK。
ループさせる要素はループが途切れない数で設定します。最後に途切れてしまう場合はこの要素を追加してみてください。

テキストが流れますテキストが流れます

テキストが流れますテキストが流れます

テキストが流れますテキストが流れます

各animationプロパティの値

思い通りの動きにするには各プロパティにどんな値が設定できるか、どんな動きになるのかある程度でも理解しておくとイメージしやすいです。

animation-duration

animation-duration は1回のアニメーションの再生時間を指定します。

単位は「s(秒)」または「ms(ミリ秒)」で指定します。1msは1000分の1秒で、1000msで1sと同じになります。単位に「s」を使用する場合は「.5s」というように小数点以下の指定も可能です。

初期値は「0s」となっており、再生時間がないのでアニメーションが表示されません。アニメーションを動かす際には必須の設定項目です。

使用例として紹介した「要素の背景が変化するアニメーション」は animation-duration: 3s; を設定しており、この場合背景がgreenからred、blueになるまでの時間が3秒です。

animation-timing-function

animation-timing-function はアニメーションの再生速度の変化を指定します。

速度を徐々に上げたり下げたり、初めは早く終盤には遅くといった緩急をつけることもできます。こういった動きの速度変化をイージングと言います。

イージングはさまざまな値が設定可能で、設定によって印象が変わります。アニメーションがきれいなサイトはこの動きの設定をしっかりとされていると思います。

/* キーワード値 */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/* 関数値 */
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
animation-timing-function: steps(4, end);

/* 段階関数のキーワード */
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

【参照】animation-timing-function | MDN

【各値の動きの参考】イメージで覚えるanimation-timing-functionプロパティ

Chrome のデベロッパーツールを使用するとイージングの動きを変更してチェックすることができます。実際にどんな動きをするかや、微調整したいときなど便利です。

animation-delay

animation-delayはアニメーションが再生されるまでの時間を指定します。

単位は「s(秒)」または「ms(ミリ秒)」で指定します。

値が指定されない場合は初期値の「0s」が設定され、すぐにアニメーションが始まります。
「-1s」といった負の数を指定するとアニメーションの途中から表示されます。

animation-iteration-count

animation-iteration-count はアニメーションの繰り返し回数を指定します。数値、もしくは infinite が指定できます。

値を infinite にすると無制限に繰り返されます。

小数点をつけた場合はアニメーションの一部が再生されます。 0.5であれば設定したアニメーションの半分、1.5なら設定したアニメーション1回と半分のアニメーションという形です。-1 といった負の数は無効になります。

animation-direction

animation-direction でアニメーションの再生方向の指定ができます。

normal(初期値)0%〜100%の順序で再生。
reverse100%〜0%の順序で再生。
alternate0%〜100%、100%〜0%を交互に再生。
alternate-reverse100%〜0%、0%〜100%を交互に再生。

animation-fill-mode

animation-fill-mode はアニメーションの開始前と終了後のスタイルを設定します。

none(初期値)アニメーションの終了時にそのスタイルは適用しない。
forwardsアニメーションが終了したらその状態のスタイルを適用。
backwardsアニメーションが終わった後はアニメーション前のスタイルを適用。
bothforwardsとbackwardsの両方を適用。

CSSアニメーションの参考

CSSアニメーションを使ったコードを紹介しているサイトのブックマークです。取り入れるのはもちろんCSSの教材としても使えます。

Pure Drawer
CSSのみで実装された14種類のドロワ―メニュー表示の紹介サイト。サイト上で実際の動きを確認でき、コードファイルをダウンロードすることも可能です。

Sliding Image Panels with CSS3 | Codrops
1枚の画像を分割してユニークな切り替えをしているアニメーション例です。作り方も確認できます。

Filter Functionality with CSS3 | Codrops
JS を使用しない要素のフィルタリングを実装した例です。こちらのデモでは、画像をホバーした時の背景アニメーションがCSSで作られています。

CSS3AnimationCheatSheet
要素のスライドインやフェードイン、バウンスやフローティングなどよく使われるアニメーション18種類のチートシート。CSSファイルをダウンロードして簡単に実装することもできます。

Blue Light Button
青白く光る文字テキストや、放射線上に広がるライティングが魅力的なホバーエフェクト。

Animations!
SVGを使った波型ラインに、アニメーションをつけたもの。

Page Control Animation
ページ送りのCSSスタイルコードです。ある状態から別の状態へ滑らかに変化させる(モーフィング)の実装参考にもなると思います。

CSS Loop 003
カラフルなドットでサイズが大小切り替わり、点滅しているようなローディングアニメーションです。

CSS Wrestler
これもCSSのみ?!と思ってしまうコミカルな動きのアニメーション。アイデア次第で色々な動きが出せることが分かります。

カテゴリー : HTML-CSS

TOPへ