ウサギさんのお悩み、解決してあげて、かがみ。
そのお悩み、解決しましょう！！
この記事を読むと、CSSのみで吹き出しを動かすことができますよ♪
たまにブログを見ていると、キャラクターのアイコンや吹き出しがアニメーションしているのって見かけませんか？
動きがあると目を引くのと見ていて楽しいので、CSSのanimationプロパティでやってみましょう！
CSSで吹き出しをアニメーションさせる方法
早速ですが、下記が必要なCSSのコードになります！
- /* 吹き出し（左）用 */
- .balloon.left .voicecomment {
- transform-origin: left top;
- animation: balloonAnime 3s ease-out 0s infinite normal both;
- }
- /* 吹き出し（右）用 */
- .balloon.right .voicecomment {
- transform-origin: right top;
- animation: balloonAnime 3s ease-out 0s infinite normal both;
- }
- @keyframes balloonAnime {
- 0% { transform: scale(1); }
- 10% { transform: scale(1.05); }
- 20% { transform: scale(1); }
- 30% { transform: scale(1.02); }
- 40% { transform: scale(1); }
- 100% { transform: scale(1); }
- }
このCSSなんですが、テーマのstyle.cssに張り付ける、または記事の投稿画面でテキストエディタを選択した状態で記事のどこかに <style>ここに上のCSSを入れる</style> を直接貼り付けてしまっても、問題なくアニメーションしましたので、お好きな方法でお試しください♪
あ、ちなみに当ブログのテーマ「スワロー」では、吹き出し部分のクラス名が「.voicecomment」なんですが、他のテーマをお使いの方は吹き出しのクラス名が異なる場合があります。
その場合は、下記の赤い箇所のクラス名を書き換えてください。
- .balloon.left .voicecomment {
- transform-origin: left top;
- animation: balloonAnime 3s ease-out 0s infinite normal both;
- }
そして最後に、吹き出し全体を囲っているdiv等のタグがあると思いますので、そのタグのクラスに「class=”balloon left”」または「class=”balloon right”」を入れてもらえれば、アニメーションすると思います！
吹き出しがアニメーションするか確認
わぁぁー！ 動いたー♪
モチも動いたーっ
無事アニメーションしましたね！
ちなみに吹き出しだけじゃなくて、アイコンの部分にCSSを追加してキャラクターをアニメーションさせることもできます。
えへへー♪
最後に：CSSは楽しい
CSSを覚えていくと、ブログのカスタマイズも自由自在になるので、ぜひぜひ色々調べてみてください！
それでは、今回はこの辺で！
いつもみていただいて
ありがとうございますっ。
わたしも動かしてみたいの。