Animate.cssで遊んでみた

こんにちは、きなこです。
この記事はOthloTech Advent Calendar 2018の7日目の記事です．

今回はAnimate.cssを使っていろいろ遊んでみたいと思います。

Animate.cssとは

Animate.cssとはdivなどの要素にあらかじめ用意されたクラスを設定するだけでアニメーションを適用させることが出来るスタイルシートです。

🍮プリンをぷるぷるさせる

See the Pen Animate.cssで遊んでみた by asuka (@asukaokochi) on CodePen.

プリンをぷるぷるとさせてみました。
ただの台形がちゃんとプリンに見えるようになりました。

🚦信号を点滅させる

See the Pen Animate.cssで遊んでみた - 信号機 by asuka (@asukaokochi) on CodePen.

青い部分にanimate.cssを適用させて信号をパカパカと点滅させてみました。
なんでも使えますね。

🚗車をたくさん走らせる

See the Pen mQYxZy by asuka (@asukaokochi) on CodePen.

かわいい〜！

感想

いかがでしたか？使い方次第でいろんな活用方法があると実感しました。

クラスを設定するだけで簡単に実装できるので、ぜひ皆さんも使ってみてください。
それでは、良いCSSライフを！