[CSS] テキストをチカチカ点滅させたい

公開日:2022/11/25

一昔前のウェブサイトでは、文字をチカチカ点滅させる文字装飾がよく見られました。

最近ではあまり見かけませんが、悪目立ちするくらい強調させたいときにはこういった表現もアリかも知れません。

というわけで今回は、テキストをチカチカ点滅させるスタイルを検討してみました。

サンプルコード

html

<span class="text_blink">文字をチカチカ点滅させる</a>

CSS

.text_blink {
    display: inline-block;
    animation: animation_text_blink 1s linear 0s infinite normal both;
}
@keyframes animation_text_blink {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

「animation」プロパティを使用します。
シンプルに「opacity」の値をアニメーションで変化させ、チカチカとした点滅を表現します。

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。