cssアニメーションで文字を点滅させてみよう

2022.1.16 更新

皆さまごきげんよう。
サイトのどこかに小さな動きがあると一瞬目を惹きますよね。
本日はcssで文字を点滅させてみようと思います。

1.CSS animationを使って文字を点滅させる

まず、このサイトのヘッダー部分のタイトルをご覧ください。実際に実装してみましたよ。cssはこんな感じです。

<pre><code>

.site-title {
    transform: rotate(-8deg);//文字を斜めに傾けています
    animation: blink 1s ease-in-out infinite alternate;//点滅アニメの設定
}

/* 点滅 */
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
  }
</code></pre>

animationの一行と@keyframesの3行のみで点滅完了です。簡単ですね！

css3 animationの指定いろいろ

• animation-nameの値
• animation-durationの値
• animation-timing-functionの値
• animation-delayの値
• animation-iteration-countの値
• animation-directionの値

この6つの値をスペースで区切って指定することができますので、これを駆使すればかなり凝った作品も作れそうです。

2.CSSのtext-shadowを使ってネオン管風の光彩をつけてみる

せっかくなのでもう少し文字を装飾してみたいと思います。
点滅といえばネオン管、が思い浮かんだので、ネオン管風な光彩をtext-shadowでつけてみます。

ヘッダーのタイトル部分のcssにtext-shadowを書き加えてみた例がこちらです。

.site-title a{
	color: #FF1493;//フォントの色
	font-size:2.5em;//フォントのサイズ
	text-shadow: 2px 2px 4px #FF93D0;//光彩を表現
 /*text-shadowは左から、
「水平方向の距離」 「垂直方向の距離」 「影のぼかし半径」 「影の色」を指定しています。*/
	}

SVGアニメーションで動くロゴを作ってみよう

もう少し暗めの背景だったら効果が良くわかったかもですが、ネオン管風な雰囲気は出たのではないでしょうか(笑)

こんなに簡単なのに、ちょっとした動きで目を惹く演出が出来るcssアニメーション、
皆さんもぜひお試し下さい♪