MENUCLOSE
twitter ツイッターfeedlyRSS

オンスタでは、オンラインで学習するために役立つコンテンツを掲載しています。そのほか、UdemyをはじめとしたEラーニングサービスの紹介も行っています。

オンスタ | オンラインで学習するための近道になるサイト
【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介!

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

公開日:2019年09月02日
最終更新日:2019年09月02日
オンスタ運営
制作
エンジニア
ホーム > 全記事一覧 > 制作 > 【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介!
このエントリーをはてなブックマークに追加
【初心者向け】cssアニメーションの基礎から簡単な作成サンプルまで一気にご紹介!

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

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

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

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

  1. :hover
  2. :focus

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

まとめ

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

関連コンテンツ

【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
エンジニア
プログラミング
公開日: 2018年12月06日
最終更新日: 2019年05月28日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営
【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer
エンジニア
公開日: 2019年02月09日
最終更新日: 2019年05月28日
【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer
オンスタ運営
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
エンジニア
プログラミング
公開日: 2016年12月06日
最終更新日: 2019年05月28日
【第1回】ノンプログラマー/プログラム初心者も楽しめる!ゴリラにも伝わるprocessing入門
オンスタ運営
【Mac】SSH接続でXserverに接続してみよう(SSHクライアントソフト FileZilla設定も解説)
エンジニア
公開日: 2017年02月01日
最終更新日: 2019年07月04日
【Mac】SSH接続でXserverに接続してみよう(SSHクライアントソフト FileZilla設定も解説)
オンスタ運営
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
エンジニア
マークアップ
公開日: 2017年01月10日
最終更新日: 2019年06月26日
【Nuxt.js】Vue.js + SSR を利用したWebサイトコーディングの可能性
オンスタ運営
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!
エンジニア
公開日: 2019年03月07日
最終更新日: 2019年05月28日
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!
オンスタ運営
HTMLって何?Web初心者でも理解できるように簡単に解説!
エンジニア
マークアップ
公開日: 2019年06月13日
最終更新日: 2019年06月19日
HTMLって何?Web初心者でも理解できるように簡単に解説!
  • # HTML
  • # pickup
  • # 初心者
オンスタ運営
【最新】Pythonの学習におすすめの本全部で14選
プログラミング
制作
電子書籍
公開日: 2019年06月25日
最終更新日: 2019年09月03日
【最新】Pythonの学習におすすめの本全部で14選
  • # Python
  • # おすすめ
  • # 本
オンスタ運営
AMP (Accelerated Mobile Pages) HTML のおさらい
エンジニア
公開日: 2016年11月14日
最終更新日: 2019年05月28日
AMP (Accelerated Mobile Pages) HTML のおさらい
  • # AMP HTML
オンスタ運営
コーダーはCSS設計に夢を見る
エンジニア
マークアップ
公開日: 2017年02月10日
最終更新日: 2019年05月28日
コーダーはCSS設計に夢を見る
オンスタ運営
全記事一覧

web制作者にオススメのオンライン学習サイト「Udemy」

世界最大級のコースがラインナップ!電子書籍サイト「Udemy」

世界最大級のコースがラインナップ!オンライン学習サイト「Udemy」

「Udemy」ではいつでもどんなトピックでも、専門家が教える何千ものコースを用意されており、無料で学べるコースも多数あります。もうちょっと勉強したいな。スキルアップしたいな。と思ったら是非チェックしてみてください。