【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介！

Warning: Undefined variable $_cat_enginieer_flag in /home/growgroup/online-study.jp/public_html/wp-content/themes/online-study-wp/views/object/components/related-posts-inline.php on line 37

【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介！

【PR】Udemyならスマホでもタブレットでも、いつでも気軽に学べます。

「これからweb制作について学ぼう」、「webサイトをもっとおしゃれにしたい！」など、これからコーディングについて学んだり、すでにコーディングについての知識があり、さらに一歩進んだ知識を手に入れたいと言った時に、アニメーションについて学ぶのはよい選択かもしれません。ここではcssで実装できるアニメーションについてまとめてみました。これから学びを深めていきたい人は是非一度覗いてみてくださいネ！

cssでのアニメーションを定義するときは大きく分けて2つ

cssでアニメーションを定義する時は以下の二つだけ！実はとてもシンプルです。

transition
@keyframesとanimation

順番に見ていきましょう！

transitionについて

transitionとは要素の変化にかかる時間を指定できるプロパティです。まとめて指定することもできますし、個別に指定することも可能です。個別の指定については以下をご参照ください。

transition-duration	開始から終了までの時間を指定します。 ※「.s」で秒指定、「.ms」でミリ秒単位の指定ができます。
transition-property	適用されるプロパティを指定します。 ※widthやcolorなどのプロパティを指定します。allと記述するとすべてにかかります。
transition-timing-function	度合いを指定します。 ※linearやease-in-out(開始と終了はゆっくり)など、いくつかの定められたキーワードで指定します。
transition-delay	開始時間を指定の時間分、後にずらします。

実際のソースコードは以下のイメージになります。

.sample {
  transition-property: all;
  transition-duration: .1s;
  transition-timing-function: linear;
  transition-delay: .1s;
}

上記コードは.sampleというクラスにtransitionの設定を割り当てています。実際に使うにはそのアニメーションを起動するためのトリガーが必要ですが、cssのみで行う場合はhoverなどが一般的でしょう。以下のコードは要素に対してhoverアクションを行うと幅が100px大きくなるサンプルです。

<div><a class="sample" href="#">これはサンプルです。</a></div>

.sample {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background-color: red;
  color: white;
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear
  &:hover {
    width: 200px;
  }
}

@keyframeとanimation

さてこちらですが、少しサンプルの作成にとまどっていますので今しばらくお待ちください。

transitionと@keyframe+animation、実際に使うときはどう使い分けているの？

さて、肝心要の使い分けですが、cssのみで行うことを前提にすると、簡単なアニメーションであれば、概ねtransitionでカタがつきます。複雑なアニメーションを実装しようとすると、keyframesとanimationを使わないと実現は難しいでしょう。

実行するタイミング

アニメーションはcssで作成したとして、実際に実行するにはどうすればよいでしょうか？ cssだけで実行することを考えてみると一部の擬似要素でしかできません。

:hover
:focus

全然数がないですねw cssのみで実行のタイミングを操作しようとするとずいぶんシンプルです。筆者はボタンやフォームのパーツにフォーカスするときなどに利用しています。それ以外の実行タイミングの制御となると、やはりjavascriptによるイベント発火のタイミングかと思います。「クリックしたら」「スクロールが到達したら」「画面のロードが完了したら」、その用途は様々ですね。