読者です 読者をやめる 読者になる 読者になる

はしくれエンジニアもどきのメモ

情報・Web系技術の勉強メモ・備忘録です。

CSS3 で\(^o^)/オワタ AA のアニメーション

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); を消す。

オワタという文字のアニメーション

オワタという文字は、opacity:0; -> opacity:1; を使っています。おそらく、ragba()でも同じことができると思います。