CSS3 で＼(^o^)／ｵﾜﾀ AA のアニメーション

＼(^o^)／ｵﾜﾀ AA をCSS3 でアニメーションさせてみました。 2コマのイメージで作ったので、ほとんどGIFと変わりません。

コード

codepen.io

以下ちょっとした解説。

ちょっとした解説

行っているアニメーションは、「手」、「口」、と「ｵﾜﾀという文字」の合計3つです。

手のアニメーション

:beforeで「左手＼」、:afterで「右手／」を追加して、 transform: rotate(45deg); で、回転させています。

口のアニメーション

口は、小文字o -> 大文字O に切り替えています。

1コマ目で、小文字o color: rgba(X, X, X, 1); を表示させておき、大文字O color: rgba(X, X, X, 0); を消しておく。 2コマ目で、大文字O color: rgba(X, X, X, 1); を表示させ、小文字o color: rgba(X, X, X, 0); を消す。