2016年 Emoji Advent Calendar 大トリ

おはようございますの方はおはようございます。
こんにちわの方はこんにちわ。
こんばんわの方はこんばんわ。
てぃーびーです。

この記事は絵文字 / Emoji Advent Calendar 2016 - Qiitaの25日目の記事です。
2016年のEmojiライフ、いかがお過ごしでしょうか？
2016年のEmoji Advent Calendar もついに最終日となりました。

最後。
つまり大トリです。
では、ご覧ください！

🐔

大トリ！

・・・ということで出落ちでした。

シルエットだけにする

• 環境によっては最初からシルエットだけです
• Firefoxの一部バージョンではシルエット表示されません

<span style="font-size:75px;color: transparent;text-shadow: 1px 1px 1px  red;">🐔</span>

🐔

回転させる

Font Awesomeの fa-spin を使って回転させてみます。

<span style="font-size:75px;" class="fa-spin">🐔</span>

🐔

揺らす

CSShake を使って 🐔 を揺らしてみましょう。

CSShake についてはこちらの記事をご確認ください。

tbpgr.hatenablog.com

<span style="font-size:75px;" class="shake">🐔</span>

🐔

トリにフォーカスしてみてください。

Animation CSS

Animation CSS であれこれ動かしてみましょう

Animation CSS の設定自体については下記記事でご確認ください。

github.com

bounce

なんというコッコ感

<div style="font-size:75px;" class="animated infinite bounce">🐔</div>

🐔

rubberBand

<div style="font-size:50px;" class="animated infinite rubberBand">🐔</div>

🐔

bounceInRight

<div style="font-size:50px;" class="animated infinite bounceInRight">🐣</div>
<div style="font-size:50px;" class="animated infinite bounceInRight">　　　🐤</div>
<div style="font-size:50px;" class="animated infinite bounceInRight">　　　　　　🐔</div>

🐣

　　　🐤

　　　　　　🐔

まとめ

文字に動きをつける場合にくらべてEmojiに動きをつけるのは当社比 10 倍はワクワクしました。

関連資料

• Animate.css
• CSShake