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

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

---

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

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

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

1. transition
2. @keyframesとanimation

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

transitionについて

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

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

.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だけで実行することを考えてみると一部の擬似要素でしかできません。

1. :hover
2. :focus

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

まとめ

以上cssアニメーションまとめでした。 本記事ですが随時追記していきますので、お時間ある際にでもまた覗いてみてくださると嬉しいです。 よろしくお願いいたします。

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

Udemyを実際に体験した方の感想記事もぜひご覧ください♪

• 【体験談】主婦が「自宅で働きたい」を叶えるために、広告バナー制作を学んでみた
• 【体験談】全くの初心者がUdemyでモーショングラフィックスを学んでみた
• 【体験談】Udemy「みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習」を実際にやってみた感想
• 【体験談】無料！？Udemyで学ぶはじめてのAI（ディープラーニング、機械学習）
• 【体験談】UdemyでWeb開発を学びました【コスパ最強】