〈PR〉プロが選ぶ!2023年最新!おすすめプログラミングスクール比較ガイド

【初心者大歓迎】CSSアニメーションを作ってみよう!

CSSアニメーションを実装するのに必要な知識とは?

  1. HTMLとCSSの基礎知識
  2. CSSのトランスフォーム(transform)プロパティとアニメーション(animation)プロパティの使い方
  3. アニメーションのタイミングやトランジションのカスタマイズ方法
  4. @keyframesルールを使ったアニメーションの作成方法

動画追加しました!

@uihack

♬ Dj Slow Yang Lagi Viral Dear Diary – Sihuun

CSSアニメーションとはそもそもなに?

CSSアニメーションは、CSSのスタイルを指定した要素に対して、時間の経過とともに変化させることができる機能です。
アニメーションを実現するには、CSSのアニメーションプロパティを使用します。
これにより、HTML要素の位置やサイズ、色などのスタイルを時間の経過と共に変化させることができます。
CSSアニメーションは、WebサイトやWebアプリケーションのユーザーエクスペリエンスを向上させるためによく使用されます。

CSSアニメーションの種類

アニメーションの種類説明
トランジション(Transition)アニメーションスタイルの変化を滑らかにするために使用されます。
トランスフォーム(Transform)アニメーション要素の位置やサイズ、回転などをアニメーションさせるために使用。
@keyframes ルールによるアニメーションスタイルの変化をフレームごとに指定してアニメーションを作成するために使用されます。
アニメーション(animation)プロパティによるアニメーションアニメーションの基本的なプロパティを指定して、アニメーションを作成するために使用されます。

特に、@keyframes ルールによるアニメーションとアニメーションプロパティによるアニメーションは、より詳細なアニメーションを作成するために使用されます。
それ以外にも、JavaScriptを使ったアニメーションもあります。

それぞれに使用シーンがありますので、目的に合わせて使用することが重要です。

CSSアニメーションの実装の考え方

  1. HTML要素を選択します。
  2. アニメーションを適用するスタイルを定義します。
  3. アニメーションを実行するためのCSSプロパティを設定します。
  4. HTML要素を選択するには、HTMLのclassやidなどを使用します。
  5. アニメーションを適用するスタイルは、CSSのクラスを使用して定義します。
  6. アニメーションを実行するためには、アニメーションプロパティや@keyframesルールを使用します。

例えば、classを使ってHTML要素を選択し、アニメーションを適用するスタイルを定義し、アニメーションを実行するためのCSSプロパティを設定する場合は、以下のようになります。

HTML
<div class="box">ここにアニメーションを適用</div>
CSS
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: move 2s ease-in-out infinite;
}

@keyframes move {
  from {
    transform: translate(0, 0);
  }
  to {
    transform: translate(100px, 100px);
  }
}
まとめ

以上の例では、class名が”box”であるdiv要素に対してアニメーションを適用し、animationプロパティにmoveという名前のアニメーションを2秒かけて実行するように設定しています。
このアニメーションは、“move”@keyframesルールによって定義されていて、その中ではtransformプロパティを使用して、要素を移動させるように指定しています。

CSSのみで実装!animationの基本概念とは?

CSS animationは、CSSプロパティの値をアニメーション化するための方法です。animationプロパティを使用して、アニメーションの設定を行います。animationには、アニメーションのスタイル、タイミング、および繰り返しに関する情報を指定することができます。また、@keyframesを使用して、アニメーションの中間状態を定義することもできます。

cssanimationの記述方法

animationプロパティには、以下のように記述します。

プロパティ説明
animation-nameアニメーション名。@keyframesで定義したアニメーションの名前を指定します。
animation-durationアニメーションの持続時間。単位は秒かミリ秒で指定します。
animation-timing-function:アニメーションの速度カーブ。ease、linear、ease-in、ease-out、ease-in-outなどがあります。
animation-delayアニメーションの開始までの遅延時間。単位は秒かミリ秒で指定します。
animation-iteration-countアニメーションの繰り返し回数。infiniteで無限に繰り返すことができます。
animation-directionアニメーションの方向。normal、reverse、alternate、alternate-reverseなどがあります。
animation-fill-modeアニメーション終了時の要素の状態。none、forwards、backwards、bothなどがあります。
animation-play-stateアニメーションのステータス。running、pausedなどがあります。

上記のプロパティはすべて省略することができ、必要なプロパティだけを指定することもできます。
例えば以下のように指定することで、アニメーション名を「example」、アニメーションの持続時間を「3s」、アニメーションの速度カーブを「ease」、アニメーションの繰り返し回数を「infinite」に設定することができます。

それぞれのプロパティは、別のプロパティと組み合わせることで、さまざまなアニメーションを実現できます。

CSSTransitionの記述方法

transitionプロパティは、以下のように指定することができます。

プロパティ説明
transition-delayアニメーションの開始までの遅延時間を指定します
transition-durationアニメーションのdurationを指定する、秒単位か時間をミリ秒で指定します
transition-propertyアニメーションを適用するスタイルのプロパティ名を指定します。
transition-timing-functionアニメーションのスピードを決定する関数を指定します。

CSSのTransitionプロパティは、HTML要素のスタイルが変更されたときに、その変更をスムーズにアニメーションするために使用されます。以下は、Transitionプロパティの使用例です。

CSS
/* 適用する要素 */
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: width 2s, height 2s, background-color 2s;
}

/* スタイル変更時 */
.box:hover {
  width: 200px;
  height: 200px;
  background-color: blue;
}

この例では、.boxの要素がマウスオーバーされると、width、height、background-colorが2秒かけて変更されます。

css@keyframesの記述方法

@keyframesルールを使用してアニメーションを定義します。 例えば、次のように定義することができます。

@keyframes example {
  0% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

CSSのanimationとtransitionの使い方!

animationサンプルコード

CSSのanimationプロパティを使用したサンプルとして、次のように要素を縦に移動するアニメーションを適用することができます。

@keyframes moveUp {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-100px);
  }
}

.example-element {
  animation: moveUp 1s ease-in-out infinite;
}

上記の例では、moveUpというアニメーションが1秒かけて実行され、その間にイージングインアウトのアニメーションとして要素が縦に-100px移動し、それを繰り返し実行するようになります。

transitionサンプルコード

CSSのtransitionプロパティを使用したサンプルとして、次のように要素の背景色をマウスオーバー時に変化させることができます。

.example-element {
  background-color: #F0F0F0;
  transition: background-color 0.5s ease-in-out;
}

.example-element:hover {
  background-color: #008080;
}

上記の例では、.example-elementに対して背景色が #F0F0F0 、マウスオーバー時に #008080 に変わるようになります。その間に0.5秒かけてease-in-out のアニメーションとして変化します。

擬似class サンプルコード

CSSのanimationでよく利用する擬似クラスには、:hover、:active、:focusなどがあります。

例えば、次のように、:hover時に要素の大きさを変化させるアニメーションを適用することができます。

.example-element {
  width: 100px;
  height: 100px;
  transition: width 0.5s ease-in-out, height 0.5s ease-in-out;
}

.example-element:hover {
  width: 120px;
  height: 120px;
}

上記の例では、.example-elementに対してwidthとheightが0.5秒かけてease-in-outのアニメーションとして変化します。

また、 :active時に背景色を変化させるアニメーションを適用することもできます。

.example-element {
  background-color: #F0F0F0;
  transition: background-color 0.2s ease-in;
}

.example-element:active {
  background-color: #008080;
}

csstransitionプロバティが思うように動かない時によくある例

CSSのtransitionプロパティが思うように動かない場合によくある例として、次のような原因が考えられます。

transitionプロパティが適用されていない要素が変化する
transitionプロパティを適用する要素に対して変化を行う必要があります。
ブラウザのバグ
特定のブラウザでトランジションが正常に動作しないことがあります。
複数の要素を動かしたいのに、上手く実装できない…
transitionプロパティは単一の要素に対してしか適用できないため、複数の要素に対して適用する場合はJavaScriptなどを使用する必要があります。

初心者でも簡単!CSSアニメーションを使ったデザインのチュートリアル!

CodePen-cssアニメーションでふわふわ-を参考に!

See the Pen cssアニメーションでふわふわ by ysakaguchi (@ysakaguchi) on CodePen.

プチ解説

transform: translateY

Y軸(下方向)へ移動させるようにしています。

animation: 3s fuwafuwa infinite

3sで、アニメーションの秒数を指定しています。
s=秒なので、今回は3秒です。

infiniteで、何回アニメーションするかの設定。
今回の場合は、無限ループします。

まとめ

以下かでしたでしょうか。
今回は、CSSアニメーションの作成方法をご紹介しました。
「animation」「transform」「@keyframes」をそれぞれ組み合わせて動きを実装する事が多いです。

ご自身で、オリジナルのアニメーションを作成してみて下さい♪


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です