CSS3 で＼(^o^)／ｵﾜﾀ AA のアニメーション
＼(^o^)／ｵﾜﾀ AA をCSS3 でアニメーションさせてみました。 2コマのイメージで作ったので、ほとんどGIFと変わりません。
コード
以下ちょっとした解説。
ちょっとした解説
行っているアニメーションは、「手」、「口」、と「ｵﾜﾀという文字」の合計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); を消す。
ｵﾜﾀという文字のアニメーション
ｵﾜﾀという文字は、opacity:0; -> opacity:1; を使っています。おそらく、ragba()でも同じことができると思います。
