WEBMAN

HTML,CSS,JSでハマった事のメモとWEB制作の実験場

公開日:

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

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

SPONSOR

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

作るきっかけ

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

DEMO

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

See the Pen ZBwxxP by SATOSHI NAGASAWA (@webman-japan) on CodePen.0

あとがき

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

SPONSOR

この記事をシェアする

コメント

関連記事