MENUCLOSE
twitter ツイッターfeedlyRSS

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

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

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

公開日:2019年09月02日
最終更新日:2022年01月17日
オンスタ運営
制作
エンジニア
ホーム > 全記事一覧 > 制作 > 【初心者向け】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でアニメーションを定義する時は以下の二つだけ!実はとてもシンプルです。

  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アニメーションまとめでした。 本記事ですが随時追記していきますので、お時間ある際にでもまた覗いてみてくださると嬉しいです。 よろしくお願いいたします。


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

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

関連コンテンツ


Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
LT(ライトニングトーク)ってなに?テック系(webなど)の勉強会でよくあるLTについてご紹介
web担当者
制作
公開日: 2020年07月28日
最終更新日: 2022年01月17日
LT(ライトニングトーク)ってなに?テック系(webなど)の勉強会でよくあるLTについてご紹介
  • # LT
  • # ドラ娘
  • # ライトニングトーク
  • # 社外勉強会
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
エンジニア
プログラミング
公開日: 2018年12月06日
最終更新日: 2022年01月17日
【PHP】PHPでライブラリ管理!「Composer」を使ってみよう
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
CSVを使ってWordPressの投稿、カスタム投稿へ記事データを流し込む方法(Really Simple CSV Importer)
WordPress
エンジニア
プログラミング
制作
公開日: 2019年10月31日
最終更新日: 2022年01月17日
CSVを使ってWordPressの投稿、カスタム投稿へ記事データを流し込む方法(Really Simple CSV Importer)
  • # Really Simple CSV Importer
  • # WordPress
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer
エンジニア
公開日: 2019年02月09日
最終更新日: 2022年01月17日
【すべてのWeb制作者に伝えたい】Webサイトのフィードバック・チェックツール Pageproofer
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
IT系勉強会ってどう探せばいい?そんな時におすすめなIT勉強会検索サイト!
web担当者
エンジニア
セミナー・カンファレンス
デザイナー
制作
公開日: 2020年09月15日
最終更新日: 2022年01月17日
IT系勉強会ってどう探せばいい?そんな時におすすめなIT勉強会検索サイト!
  • # IT勉強会
  • # TechPlay
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
HTMLって何?Web初心者でも理解できるように簡単に解説!
エンジニア
マークアップ
公開日: 2019年06月13日
最終更新日: 2022年01月17日
HTMLって何?Web初心者でも理解できるように簡単に解説!
  • # HTML
  • # pickup
  • # 初心者
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
LPってなに?webサイト種類とランディングページについて解説
web担当者
制作
公開日: 2020年07月14日
最終更新日: 2022年01月17日
LPってなに?webサイト種類とランディングページについて解説
  • # LP
  • # webサイトの種類
  • # ランディングページ
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
ユーザビリティってなに?ユーザビリティの概要と、その重要性について簡単にまとめてみた
web担当者
制作
公開日: 2020年08月18日
最終更新日: 2022年01月17日
ユーザビリティってなに?ユーザビリティの概要と、その重要性について簡単にまとめてみた
  • # ユーザビリティ
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
【最新】Pythonの学習におすすめの本全部で14選
プログラミング
制作
電子書籍
公開日: 2019年06月25日
最終更新日: 2022年01月17日
【最新】Pythonの学習におすすめの本全部で14選
  • # Python
  • # おすすめ
  • # 本
オンスタ運営

Warning: Trying to access array offset on value of type bool in /home/growgroup/online-study.jp/public_html/wp-content/plugins/wp-word-count/public/class-wpwc-public.php on line 123
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!
エンジニア
公開日: 2019年03月07日
最終更新日: 2022年01月17日
独断と偏見で選ぶ Chrome DevToolsの便利な機能 8選!
オンスタ運営
全記事一覧

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

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

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

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