CSSアニメーションでレーダー風な物を作る

投稿日:2016年12月20日

Tags: CodePen CSS HTML メモ

レガシーなブラウザを含めた案件ばかりやってきてたから中々使う機会がなく、知識に乏しかったので練習がてら作ってみました。 プロパティ云々に関しては「CSSアニメーション 入門」という qiita の記事が素晴らしかったので参考にさせていただきました。

作るきっかけ

仕事で CSSアニメーション を使おうとして(結局使わなかったけど…)、調べてたら「電波っぽいアニメーションを3行で追加する「Pulsator」の使い方と実装解説」という Swift の記事だけど、記事内の電波っぽい動きのアニメーションに感銘を受けて、これは CSS でもできんじゃないかと思ったのがきっかけです。

DEMO

検証は WINChrome,Firefox,IE11,Edgeで見てみましたが、綺麗に動くのは Chrome だけです。 スマホでも最新の iOS とか Android 6 系なら見れるのではないかと。

あとがき

仕事でリリースが続いて、なかなか更新できなかったけどやっとこさ更新できました。 来年は何かしらの「Advent calendar」に投稿できるくらい知見を増やしたいなぁ。

  • シェア:
Last Updated: 2019-9-9 21:37:59