第19回　CSSアニメーションの「バウンス」が動かない！

CSSアニメーションとは、これもHTMLで書かれたwebページの装飾のためのツールです。

「CSSアニメーション」と言う言葉で検索すると色々出てきます。

webページの文字や画像に動きを与えるのがCSSアニメーションです。

スクリプト言語を使用しないので、手軽にできると評判です。

その中でも「バウンス」は、文字や画像をはねさせることが出来るものです。

当サイトのトップページで「タイトルをクリック」という文字がバウンスしています。これのことです。

これが動かない、というエラーがありました。

これ、実は与えられた要素がdisplay:inlineだと動かないのです。

なので、display:inline-blockという、インライン要素とブロック要素を併せ持つものにかえたら

起動しました。つまり、ブロック要素じゃないと動かなかったってことですね。

そうそう、インライン要素とブロック要素というものがあるのですが、

これを書くと私では説明するのが下手なので、他の方のサイトを見た方がわかりやすいです。

これはHTMLの基本的なことなので、どのサイトにも、どの本にも記述されています。

ぜひ御一読いただければと思います。