HTML/CSS

CSSアニメーションを簡単に実装!コピペOKのサンプルコード付き【HTML/CSS】

こんにちは、リバティエンジニアのFUNA(フナ)です。

現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

 

この記事はこんな方におすすめ

  • CSSアニメーションの使い方が知りたい
  • CSSアニメーションのコピペで使えるサンプルが欲しい

 

今回は、CSSのみで実装することのできるアニメーションの方法を解説します。

サンプルコード付きでわかりやすく、コピペでも簡単に実装できるようになっていますので、実際に動かして試してみてください。

 



 

CSSアニメーションとは

CSSアニメーションとは、「CSSのスタイル設定を別の設定へ遷移させることが可能」になるものです。

簡単に言うと、「要素を動かしてアニメーションをつけることができる」ということですね。

 

このCSSアニメーションは2つの要素で構成されています。

  • アニメーションについて記述するスタイル
  • アニメーションの始めと終わりのCSSスタイルを示すキーフレーム

 

キーフレーム(@keyframes)ではアニメーションをする要素の外見(形状)などを設定します。

 

例えば、アニメーションが始まる時は高さ(height)を150pxにして、アニメーションが終わる時には高さ(height)を500pxには以下のように記述します。

@keyframes height-animation {
  0% {
    height: 150px;
  }
  100% {
    height: 500px;
  }
}

上記のサンプルコードのように「0%はアニメーションの始点」「100%はアニメーションが終点」を表しています。

 

 

animationプロパティを設定

@keyframesで定義した動きと組み合わせて、時間やタイミングなどの設定をして要素に適用させるのが「animationプロパティ」です。

CSSアニメーションの流れ (シーケンス) を作成するには、その要素に「animationプロパティorサブプロパティ」を追加します。

 

サブプロパティ名説明
animation-nameアニメーションのキーフレームを示す@keyframes「@規則の名前を指定」します。
animation-duration1 回のアニメーションサイクルに要する時間の長さを設定します。
animation-timing-functionアニメーションの進め方を設定します。 ここには加速曲線を定義することで、キーフレーム間のアニメーションをどのように進めていくかを表しています。
animation-delay要素が読み込まれてから、アニメーションをスタートするまでの遅延時間を設定します。
animation-iteration-countアニメーションを繰り返す回数を設定します。 アニメーションを無限に繰り返すには「infinite」を指定することで実現できます。
animation-directionアニメーションのシーケンス完了時に「逆方向にアニメーションして繰り返す」か、「始めの状態にリセットしてアニメーションを繰り返す」かを設定します。
animation-fill-modeアニメーションの実行前後に、指定したスタイルを適用するかどうかを設定します。
animation-play-stateアニメーションを一時停止したり、再開させたりすることができます。

 

CSSアニメーションのサンプル

では、CSSアニメーションを実際に使ったサンプルをいくつか用意したので、参考にしてみてください。

 

【CSSアニメーション】要素が画面を横切るサンプル

pタグの要素にテキストを記述し、その要素が画面を横切るようなアニメーションを実装することができます。

 

See the Pen css-animation by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

【CSSアニメーション】イベントを利用したサンプル

アニメーションイベントを用いることでアニメーションを制御したり、アニメーション付随する情報を得ることができます。

イベントは「AnimationEventオブジェクト」に集められていて、アニメーションの「開始・終了・繰り返しの始まり」を検出することができます。

 

See the Pen css-animation-events by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

CSSアニメーションイベントの詳細

CSSアニメーションのイベントについて少し深掘りします。

大まかな実装の流れは下記の通りです。

  1. HTMLを作成
  2. CSSを追加
  3. アニメーションイベントのリスナーの追加
  4. イベントを受け取って処理する

 

順番にどのような処理をするのかみていきましょう。

 

HTMLを作成

まずはHTMLを作成しましょう。

この後にイベントを取得して出力する際に必要な構成です。

<h1 id="title">これはウィンドウを横切るテキストです。</h1>
<p class="content">当ブログサイトを少し自己紹介します。FUNABLOGではIT系の情報やフリーランスに役立つ情報を発信しているサイトです。</p>

<p>CSSアニメーションのイベントを使って<span>時間の経過で文字を出力</span>することもできます。</p>
<ul id="output">
</ul>

 

CSSを追加

次に、アニメーションのCSSを記述します。

.slidein {
  animation-duration: 3s;
  animation-name: slidein;
  animation-iteration-count: 5;
  animation-direction: alternate;
}

@keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
    margin-left:0%;
    width:100%;
  }
}

 

このアニメーションは3秒後に終わり、5回繰り返され、繰り返す際には逆方向へアニメーションを行います。

「@keyframes」内では、要素が画面を横切るアニメーションを追加するために、widthとmargin-leftを変化させています。

 

アニメーションイベントのリスナーの追加

アニメーションイベントを取得するために、JavaScriptでコードを記述します。

setup()関数を使うことで、アニメーションイベントのリスナーとなり、ファイルが読み込まれた時に最初に呼び出されることになります。

var element = document.getElementById("title");
element.addEventListener("animationstart", listener, false);
element.addEventListener("animationend", listener, false);
element.addEventListener("animationiteration", listener, false);

element.className = "slidein";

 

イベントを受け取って処理する

送られたイベントは以下の「listener()関数」に送られます。

function listener(event) {
  var l = document.createElement("li");
  switch(event.type) {
    case "animationstart":
      l.innerHTML = "アニメーションが始まります。";
      break;
    case "animationend":
      l.innerHTML = "アニメーションが始まってから" + event.elapsedTime + "秒後の表示です。";
      break;
    case "animationiteration":
      l.innerHTML = "アニメーションが始まってから" + event.elapsedTime + "秒後の表示です。";
      break;
  }
  document.getElementById("output").appendChild(l);
}

 

このサンプルコードでは、switch構文で「event.type」を判別し、それぞれの処理をしています。

ここで下記には注意してください。

  • 最終の繰り返しの後にはanimationiterationイベントが発生しない
  • でも、animationendイベントは発生する

 

【完成】CSSアニメーションイベント実行画面

上記の処理を全て記述し、少しだけデザインを整えたものの出力結果がこちらです。

See the Pen css-animation-events by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

 

【HTML/CSS】アニメーションまとめ

今回は、CSSアニメーションについて「@keyframesとanimationプロパティ」について解説しました。

複雑なアニメーションをJavaScriptを使わず、CSSだけで実装できるのは魅力的ですね。

 

 

CSSアニメーションができるだけでデザインの幅が大きく広がります。

ぜひ実際にコピペでもいいのでコーディングして、色々カスタマイズしながら試してみてください。

 

 

Kindle Unlimitedで無料で本が読める

 

Kindle Unlimitedを無料で試す

 

なら最初の30日間は無料でコーディング・デザイン・ブログ・英語・Youtubeの参考書・キャリア・副業・マーケティング・漫画・美容知識・雑誌などが読み放題です。

人気の本もあるので是非お試ししてみてください!30日以内に解約すればお金は全くかかりません。

 


最近の投稿

【今すぐ行動しよう】フリーランスエンジニアとブログの相性は抜群!

フリーランスエンジニアがスキルや経験から得たビジネスノウハウを共有する手段として「ブログ」は非常におすすめです。自身のスキルや知識のアウトプットや、実際に自分が経験したことを共有して同じような境遇の人の手助けになるような情報を公開することで自分に帰ってくるメリットは非常に多いです。今回はそのあたりについて紹介していきます。

【経験談】フリーランスのエンジニアは本当に大変なの?安定のコツやポイント

フリーランスのエンジニアは「大変だからやめとけ」という話をよく聞くので、そのことについて現役でフリーランスエンジニアとして生活している私が、その話の実態を解説しようと思います。フリーランスエンジニアの大変なところはもちろんありますが、それ以上にメリットが多いので私個人的には非常におすすめしています。

【幸福度UP】フリーランスエンジニアの「田舎暮らし」実現できます

フリーランスエンジニアとして田舎で暮らす人が増えてるって聞くけど、本当なのかな?どうやったら実現できるのか?今回はフリーランスエンジニアとして田舎で生活をしたいという方向けに、実現可能なのか、実現するにはどうすれば良いのかをご紹介します。

【単価交渉で収入アップ】フリーランスが単価交渉を成功させる4つのポイント

フリーランスが収入をアップさせるための重要な手段のひとつに「単価交渉」があります。今回は、現役でフリーランスとしてエンジニアをしている私が実践して効果のあった単価交渉の方法やコツをご紹介します。

【 今なら無料!】タスク管理ツール「Backlog」を無料で使う方法と手順

今回は、普段のタスク管理からプロジェクトの管理まで幅広く使えるツール「Backlog」を無料で使うための方法とその手段を画像つきで紹介しました。もし気に入らなければ、期間内に解約してしまえば費用はかかりません。また、以外と知られていない「フリープラン」も紹介しているので、是非参考にしてみてください。

Copyright© FUNA BLOG , 2021 All Rights Reserved.