CSSアニメーションでレーダー風な物を作る
投稿日:2016年12月20日
レガシーなブラウザを含めた案件ばかりやってきてたから中々使う機会がなく、知識に乏しかったので練習がてら作ってみました。
プロパティ云々に関しては「CSSアニメーション 入門」という qiita
の記事が素晴らしかったので参考にさせていただきました。
作るきっかけ
仕事で CSSアニメーション
を使おうとして(結局使わなかったけど…)、調べてたら「電波っぽいアニメーションを3行で追加する「Pulsator」の使い方と実装解説」という Swift
の記事だけど、記事内の電波っぽい動きのアニメーションに感銘を受けて、これは CSS
でもできんじゃないかと思ったのがきっかけです。
DEMO
検証は WIN
の Chrome
,Firefox
,IE11
,Edge
で見てみましたが、綺麗に動くのは Chrome
だけです。
スマホでも最新の iOS
とか Android 6
系なら見れるのではないかと。
あとがき
仕事でリリースが続いて、なかなか更新できなかったけどやっとこさ更新できました。 来年は何かしらの「Advent calendar」に投稿できるくらい知見を増やしたいなぁ。