ブログ - 2021-10-16 11:13:00

CSSでアニメーションを作ってみよう!

Posted by 堀 裕成
Yusei Hori

こんにちは、ほーりーです。

 

HTML・CSS・PHPと絶賛勉強を続けている私ですが、

今まであまり手を出してこなかったものがあります。

 

そう、アニメーションです。

 

アニメーションってそもそもどんな感じ??

と思われるでしょうが、簡単に言うとこんな感じ。

僕ができるのはこの程度で、

これ以上アニメーションをするとなるとJavascriptを徹底的に学ばなければならない….

そう思っていました。

 

が!!しかし!!

CSSでもアニメーションって結構できちゃうんですね!

今更(遅すぎ)それを知った私、重い腰をあげて練習を始めています。

 

https://b-risk.jp/blog/2021/01/anim-reference/#link01-2

上記ページを参考させていただき作った一例がこちら

 

マスターしたらだいぶ動きのあるページができちゃいそうですね!

 

このCSSアニメーション、極めたらこんなのも作る猛者がいるらしいですよ。

いやゲーム遊べちゃうやん…

https://ash-creator.com/hentai_css/mario/

制作者(あしざわ様)のtwitter

https://twitter.com/ash_creator/status/1346083972699230211?s=20

 

もちろん、タイミングなど拘っていくと他の知識が必要になってきますが、

アニメーションに手を出すいいきっかけになりました!

 

よりよいページを作れるようになるため、

研鑽を積んで参ります!!!

 

 

Posted by Yusei Hori
鳥栖テクニカルディレクター/カメラマン/WEBコーダー/ナレーター 堀 裕成

堀 裕成が書いたその他記事

2021-05-14
ビール × AR !?
2021-01-29
GH4で写真撮影

ブログ TOP

ブログ 2021-12-24 11:42:00

皆さん     こんにちは!!       先日E.ZO福岡にある「チー ...


ブログ 2021-05-08 21:03:00

こんにちは、桑原です。 今回は、AE cc2020から追加した新機能の ドロップダウンメニュー制御について紹介します! cc2020が ...


ブログ 2021-01-17 21:33:00

予想通り、福岡にも緊急事態宣言が発令。 福岡県covid19emergency       現時点で ...


ブログ 2021-01-31 22:20:00

写真撮影〜構図編〜 ・第1弾「日の丸構図」 ・第2弾「放射線構図」 ・第3弾「対角線構図」 ・第4弾「シンメトリー(2分割)構図」 ...


ブログ 2022-09-30 08:39:00

皆さんこんにちは~   いかがお過ごしでしょうか~   最近はちゃんとご飯を食べなきゃと焦っている牛です。 & ...


ブログ 2023-03-28 02:01:00

どうも皆さんこんにちは! 志水 勇輔(しみず ゆうすけ)です。 先日、長崎の現場を終えた後にハウステンボス研修に連れて行っていただき花火 ...


ブログ 2021-02-22 16:36:00

皆さんこんにちは!   今回のお話は バンドなど、楽器演奏のオペレートに欠かせない、 "DI(ダイレクトボックス)"につい ...


ブログ 2020-01-31 22:24:00

  こんにちは、たけばです^^ 皆さんはゲストハウスを利用したことありますか?     ただいま鹿児 ...


ブログ 2022-04-15 19:19:00

こんにちは、こんばんは 江原です。     先日(結構前ですけど)、 劇団四季のミュージカル『CATS』を観て ...


ブログ 2023-05-26 19:30:00

    こんちわー! 横山です。     先日、大阪へ『 TWICE 5TH WORLD ...