ブログ - 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-01-30 19:48:00

どうもこんにちは山内です★ 本日は現在you tubeで人気の企画「the first take」を会社で真似してみよう!!! ってこと ...


ブログ 2020-05-29 23:14:00

みなさんこんにちは! 最近、食生活が心配になってきた水流です。。   最近は家にいるにも関わらずついつい食生活が疎かになって ...


ブログ 2022-02-14 11:24:00

みなさんハッピーバレンタインですね!!! サムネイルは【Google】のバレンタインですが、みなさんはチェックしましたか??? &nbs ...


ブログ 2021-12-26 11:31:00

こんにちは、こんばんは エハラです     さて、先日結婚式の「挙式」のいろいろなスタイルをご紹介しました。 ...


ブログ 2020-01-30 21:47:00

こんにちは!深田です! 新しいカメラを買っちゃいました! Panasonic LUMIX S1H   このカメラは最高 ...


ブログ 2023-01-16 20:35:00

12/14,15の2日間で東京に研修に行ってきました!! コロナで中々実施できていない中、数年ぶりの東京研修だったみたいです! 1年目で ...


ブログ 2021-05-20 21:16:00

どうも 山内です★ 本日はレーザーについてお話していきたいと思います! レーザー演出は音楽LIVEシーンなどでみることが多いと思います ...


ブログ 2021-01-27 14:39:00

こんにちは!平野です。   私事ではありますが年末に誕生日を迎えまして、 年末だしコロナの関係もあって会えないので 「プレ ...


ブログ 2022-04-30 14:50:00

こんにちは! 深田雄太です!   先月、チームラボプラネッツに行ってきました! https://planets.teaml ...


ブログ 2021-04-19 18:56:00

  「偶然の成功より、失敗の原因を知りたい」 Perfumeのライブ演出やリオ五輪の閉会式の演出を手がける ライゾマティクス ...