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

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

動画追加しました！

@uihack

♬ Dj Slow Yang Lagi Viral Dear Diary – Sihuun

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

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

CSSアニメーションの種類

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

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

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

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

<div class="box">ここにアニメーションを適用</div>

.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);
  }
}

CSSのみで実装！animationの基本概念とは？

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

cssanimationの記述方法

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

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

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

CSSTransitionの記述方法

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

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プロパティが思うように動かない場合によくある例として、次のような原因が考えられます。

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

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

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