【CSS】アニメーションで動く見出しをCSSで作ってみる！

【CSS】アニメーション付き見出しをCSSで作ってみる！

今回は、CSSを使って見出しにアニメーションをつけてみたいと思います！

最初に、ベースとなるCSSコードを紹介した後、アニメーションのパターンをいくつか紹介していきます。

ブログで使用する場合は
- はてなブログの場合
ベースコード
- 表示の確認
アニメーションパターン
まとめ

ブログで使用する場合は

ご利用のブログがHTML記述に対応している場合は、紹介するCSSを<style>と</style>で囲んで記述してください。

※ CSS用の入力欄がある場合は<style>と</style>の囲みなしで記述してください。

HTMLコードについては、そのまま入力でＯＫです。

はてなブログの場合

以下の記事ではてなブログでCSSを使う方法をまとめています。

今回の内容をはてなブログで試す場合は、上記の記事を参考にしてください。

ベースコード

ベースとなるCSSとして、前回紹介した、付箋風の見出しを利用したいと思います。

.heading.tag {
    text-decoration: none;
    padding: 0.5rem;
    background: #f7f7f7;
    border-left: solid 6px #58ad5a;
    color: #58ad5a;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.22);
}

.heading.yellow {
    border-left: solid 6px #efcc4c;
    color: #efcc4c;
}

.heading.blue {
    border-left: solid 6px #5bb1fc;
    color: #5bb1fc;
}

.heading.purple {
    border-left: solid 6px #7e5bfc;
    color: #7e5bfc;
}

.heading.red {
    border-left: solid 6px #ff3c3c;
    color: #ff3c3c;
}

付箋風の見出しについては、以下の前回記事を参照してください。

表示の確認

前回記事でも確認していますが、いちおう表示を確認しておきます。

以下のようなHTMLを記述することで、上述のCSSが適用されます。

<p class="heading tag">緑</p>
<p class="heading tag red">赤</p>
<p class="heading tag yellow">黄</p>
<p class="heading tag blue">青</p>
<p class="heading tag purple">紫</p>

※ h1タグなどを使用すると目次に反映されてしまうため、ここではpタグを使用していますが、h1やh2タグでも適用可能です。

実際の表示は、以下のような感じになります。

緑

赤

黄

青

紫

アニメーションパターン

見出しの背景色を変えてみる！

まずは、見出しの背景色を変えてみたいと思います。

ベースコードに、以下のようなCSSコードを追加してください。

.heading.tag.background-color-transition {
    transition: background-color 0.5s;
}

.heading.tag.background-color-transition:hover {
    background-color: #e4f2e5;
}

.heading.tag.background-color-transition:hover.yellow {
    background-color: #fcf4d8;
}

.heading.tag.background-color-transition:hover.blue {
    background-color: #d8edfe;
}

.heading.tag.background-color-transition:hover.purple {
    background-color: #e4ddfe;
}

.heading.tag.background-color-transition:hover.red {
    background-color: #ffe4e4;
}

transition: background-color 0.5sで背景色の変化にかかる時間を指定しています。

background-colorでマウスオーバー時の背景色を指定しています。

先ほどのpタグに、background-color-transitionクラスを追加するとアニメーションが適用されます。

<p class="heading tag background-color-transition">緑</p>
<p class="heading tag red background-color-transition">赤</p>
<p class="heading tag yellow background-color-transition">黄</p>
<p class="heading tag blue background-color-transition">青</p>
<p class="heading tag purple background-color-transition">紫</p>

表示は以下のような感じになります。

緑

赤

黄

青

紫

マウスオーバーすると背景色が変化するのを確認できます。

※ スマホの場合は、見出しをタップしてみてください。

見出しを回転させてみる！

続いて、見出しを回転させてみます。

以下のようなCSSコードを追加してください。

.heading.tag.rotateX {
    transition: 1.5s;
    transform: rotateX(360deg);
}

.heading.tag.rotateX:hover {
    transform: none;
    transition: 0s;
}

.heading.tag.rotateY {
    transition: 1.5s;
    transform: rotateY(360deg);
}

.heading.tag.rotateY:hover {
    transform: none;
    transition: 0s;
}

.heading.tag.rotateZ {
    transition: 1.5s;
    transform: rotateZ(360deg);
}

.heading.tag.rotateZ:hover {
    transform: none;
    transition: 0s;
}

「マウスオーバー時」に回転するようにすると、マウスカーソルが見出しから外れたときに途中で回転が止まってしいます。

なので、「マウスカーソルが見出しから外れたとき」に回転するような設定にしています。

:hover付きの指定の内容は、「マウスカーソルが見出しから外れたとき」に回転するようにするためのダミー的な指定になります。

:hoverがついていない方の内容は、回転の動作についての設定です。

transitionプロパティでは回転のスタートから終わりまでにかかる時間を指定しています。

transitionプロパティを調整することで、回転のスピードを調整することができます。

transformプロパティでは回転の軸と角度を指定しています。

実際に表示して確認してみます。

以下のように、pタグを記述してみてください。

<p class="heading tag rotateX">X軸で回転</p>
<p class="heading tag rotateY">Y軸で回転</p>
<p class="heading tag rotateZ">Z軸で回転</p>

表示は以下のような感じになります。

X軸で回転

Y軸で回転

Z軸で回転

上記の付箋風の見出しにマウスを合わせた後、マウスを見出しの外に移動してみてください。

※ スマホの場合は、見出しをタップした後、他の場所をタップしてみてください。

見出しが回転すれば、設定成功です。

ゲージ風のアニメーションをつけてみる！

最後に、ゲージのように付箋の色付き部分が伸びるようなアニメーションを追加してみたいと思います。

.heading.tag.gauge {
    background: linear-gradient(to right, #58ad5a 50%, #f7f7f7 50%) right bottom;
    background-size: 200% 100.5%;
    transition: all 1s ease-out;
}

.heading.tag.gauge:hover {
    background-position: left bottom;
    color: white;
}

.heading.tag.gauge.yellow {
    background: linear-gradient(to right, #efcc4c 50%, #f7f7f7 50%) right bottom;
    background-size: 200% 100.5%;
    transition: all 1s ease-out;
}

.heading.tag.gauge.yellow:hover {
    background-position: left bottom;
    color: white;
}

.heading.tag.gauge.blue {
    background: linear-gradient(to right, #5bb1fc 50%, #f7f7f7 50%) right bottom;
    background-size: 200% 100.5%;
    transition: all 1s ease-out;
}

.heading.tag.gauge.blue:hover {
    background-position: left bottom;
    color: white;
}

.heading.tag.gauge.purple {
    background: linear-gradient(to right, #7e5bfc 50%, #f7f7f7 50%) right bottom;
    background-size: 200% 100.5%;
    transition: all 1s ease-out;
}

.heading.tag.gauge.purple:hover {
    background-position: left bottom;
    color: white;
}

.heading.tag.gauge.red {
    background: linear-gradient(to right, #ff3c3c 50%, #f7f7f7 50%) right bottom;
    background-size: 200% 100.5%;
    transition: all 1s ease-out;
}

.heading.tag.gauge.red:hover {
    background-position: left bottom;
    color: white;
}

各色について、設定を追加しています。

:hoverがついていない方の設定のbackgroundには２つの色の指定があります。

１つ目の色は付箋の色にあわせています。

２つ目の色は、付箋の背景色になります。

また、transitionプロパティでは変化にかかる時間や変化の仕方を調整することができます。

実際に表示して確認するために、以下のようにpタグを調整してみてください。

<p class="heading tag gauge">緑</p>
<p class="heading tag red gauge">赤</p>
<p class="heading tag yellow gauge">黄</p>
<p class="heading tag blue gauge">青</p>
<p class="heading tag purple gauge">紫</p>