CSSアニメーションミニゲーム
ネコブレイバーをつかまえろ！

③

②

①

Start!!

congrats!!

Tweet

>> もういっかいあそぶ

>> ネコブレイバー作者

CSSアニメーション例

• 右から颯爽と登場
• 颯爽と登場してセリフ
• ミニゲーム「ネコブレイバーをつかまえろ！」
• トップページ

アニメーション概要

カウントダウンはそれぞれ重なったdivタグのボックスに対して、opacityをずらして表示しています。

通過するネコブレイバーはleftプロパティで動かしています。

つかまえるのに失敗した場合、ネコブレイバーの通過後にRetryボタンが表示しますが、これもCSSのopacityで制御しています。そのため、透過しているときでもクリックできる欠点があります。この欠点を補うなら、JavaScriptでdisplayプロパティを切り替えるのがよいと思います。

つかまえるのに成功したらモーダルが表示されますが、これもCSSアニメーションでは苦しかったので、JavaScript（jQuery）で実装しています。クリックイベントでモーダルをfadeIn、ネコブレイバーをfadeOutしています。