【HTML /CSS基礎】CSSだけで作るアニメーション

【HTML /CSS基礎】CSSだけで作るアニメーション

CSSで作るアニメーションについて

記事の監修者

アバター

ena

ohsakoena

この記事では、CSSアニメーションについて説明します。

アニメーションと言えば「JavaScript」を思い浮かべる人が多いと思いますが、実はCSSでもアニメーションを作成することができます。

早速、CSSだけでアニメーションを作ってみたい方、要チェックです!

CSSアニメーションとは

CSSアニメーションとは、CSSで「@keyframes」を使ってアニメーションを実装することを言います。

JavaScriptのように長いコードを記述せずに、短いコードでアニメーションを実装できます。

メリット

CSSで作るアニメーションについて

・JavaScriptを使わない分、読み込みが早くなる
・JavaScriptに比べて、学習コストが低い 主要なブラウザ全てに対応している(上の画像を参照)

デメリット

・CSSのコード量が多くなる
・複雑なアニメーションには不向き

使い方

CSSアニメーションは、以下のCSSを使って実装します。

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

・animation関連プロパティ
・@keyframes

animation関連プロパティでアニメーションの挙動を指定し、@keyframesに実際の動きを記述するイメージです。

以下のようなanimation関連プロパティがあります。

・animation-name … アニメーション 名を指定
・animation-duration … 開始から終了までの時間を指定
・animation-timing-function … どのように変化するかを指定
・animation-delay … 開始するまでの時間を指定
・animation-fill-mode … 実行前後の状態を指定
・animation-direction

… 実行される方向を指定
・animation-iteration-count .. 実行回数を指定
・animation-play-state … 実行中かどうかを指定 必要に応じて指定しましょう。

デモ

テックアイエス冒頭

See the Pen Untitled by ohsakoena (@ohsako_techis) on CodePen.

デモとして、背景が流れるように現れた後文字が浮かび上がるアニメーションを紹介します。

「@keyframes」を使ったCSSアニメーション以外では、「transition」プロパティを使ったアニメーションがあります。

transitionは、@keyframesをわざわざ使うほどでもないアニメーションによく使います。

TECH I.S.公式サイトのヘッダーメニュー には、「transition」プロパティが使われています。

 

CSSアニメーションを使うと、JavaScriptを使わずにアニメーションが実装できてしまいます。

JavaScriptやjQueryは便利ですが、ファイルを読み込む分どうしても処理速度が落ちてしまうのが難点です。

HTMLとCSSだけでWebサイトを作りたいなら、是非CSSアニメーションの使用を検討してみてください。

お読みいただき、ありがとうございました。

<参考リンク>

CSSアニメーションの使用 MDN Web Docs

animation MDN Web Docs

全国どこにいても学べる!超優良のプログラミングスクールまとめました
【国内完全網羅】現役エンジニアが厳選したおすすめのプログラミングスクール

自分の住んでるエリアでプログラミングスクールを探したい⭐️

エリア別で、おすすめのプログラミングスクールをまとめました。

ぜひ参考にしてみてくださいね。

北海道 / 東北

北海道 / 青森 / 秋田 / 岩手 / 山形 / 福島

関東

群馬 / 栃木 / 埼玉 / 茨城 / 東京 / 千葉 / 神奈川

中部

福井 / 石川 / 岐阜 / 愛知 / 富山 / 長野 / 山梨 / 静岡 / 新潟

近畿

兵庫 / 京都 / 大阪 / 滋賀 / 奈良 / 三重 / 和歌山

中国

山口 / 島根 / 鳥取 / 広島 / 岡山

四国

愛媛 / 香川 / 高知 / 徳島

九州 / 沖縄

長崎 / 佐賀 / 熊本 / 福岡 / 大分 / 宮崎 / 鹿児島 / 沖縄

稼げるスキルを身につけるなら

どこにいても、どこよりもプログラミングスキルを習得できるのはテックアイエスだけ。

HPで詳細を確認する

将来を変えられるのは「今」しかない!

これからの働き方、生活に不安がある方はプログラミング学習を考えてみませんか。

詳しい情報をHPでチェックする

自立したい人支えます!

これからのスキルを習得して自分で稼ぐスキル身につけたい人は必見です。

HPで詳しく見る

将来を変えられるのは「今」しかない!

これからの働き方、生活に不安がある方はプログラミング学習を考えてみませんか。

詳しい情報をHPでチェックする

稼げるスキルを身につけるなら

どこにいても、どこよりもプログラミングスキルを習得できるのはテックアイエスだけ。

HPで詳細を確認する

自立したい人支えます!

これからのスキルを習得して自分で稼ぐスキル身につけたい人は必見です。

HPで詳しく見る

自立したい人支えます!

これからのスキルを習得して自分で稼ぐスキル身につけたい人は必見です。

HPで詳しく見る

将来を変えられるのは「今」しかない!

これからの働き方、生活に不安がある方はプログラミング学習を考えてみませんか。

詳しい情報をHPでチェックする

稼げるスキルを身につけるなら

どこにいても、どこよりもプログラミングスキルを習得できるのはテックアイエスだけ。

HPで詳細を確認する