【コピペでOK】美しい文字を点滅させるCSSアニメーション

l o v e

y o u

はくさん

HTMLコード
CSSコード
読まなくてもいい
1. animationプロパティ
2. @keyframes

HTMLコード

<div class="haku-20230306">
        <div>
            <span>I</span></div>
        <div>
            <span>l</span>
            <span>o</span>
            <span>v</span>
            <span>e</span></div>
        <div>
            <span>y</span>
            <span>o</span>
            <span>u</span></div>
        <div>
            <span>は</span>
            <span>く</span>
            <span>さ</span>
            <span>ん</span></div>
</div>

各文字のアニメーションを独立して実行できるようにするために、それらはspanタグで囲みます。

CSSコード

body{
    background-color: black;
}
.haku-20230306{
    display: flex;
    justify-content: space-around;
}
.haku-20230306 div{
    display: inline-block;
    color: transparent;
}
span{
    font-size: 120px;
    animation: twinkle 4.6s linear infinite;
}

.haku-20230306 div:nth-child(1) span:nth-child(1){
    animation-delay: 0s;
}
.haku-20230306 div:nth-child(2) span:nth-child(1){
    animation-delay: 0.4s;
}
.haku-20230306 div:nth-child(2) span:nth-child(2){
    animation-delay: 0.8s;
}
.haku-20230306 div:nth-child(2) span:nth-child(3){
    animation-delay: 1.2s;
}
.haku-20230306 div:nth-child(2) span:nth-child(4){
    animation-delay: 1.6s;
}
.haku-20230306 div:nth-child(3) span:nth-child(1){
    animation-delay: 2.0s;
}
.haku-20230306 div:nth-child(3) span:nth-child(2){
    animation-delay: 2.4s;
}
.haku-20230306 div:nth-child(3) span:nth-child(3){
    animation-delay: 2.8s;
}
.haku-20230306 div:nth-child(4) span:nth-child(1){
    animation-delay: 3.2s;
}
.haku-20230306 div:nth-child(4) span:nth-child(2){
    animation-delay: 3.6s;
}
.haku-20230306 div:nth-child(4) span:nth-child(3){
    animation-delay: 4s;
}
.haku-20230306 div:nth-child(4) span:nth-child(4){
    animation-delay: 4.4s;
}
@keyframes twinkle{
    0%{
        color: transparent;
    } 
    100%{
        color: aliceblue;
        text-shadow: 0 0 4px skyblue,
                        0 0 10px skyblue,
                        0 0 20px skyblue,
                        0 0 30px skyblue,
                        0 0 40px skyblue,
                        0 0 50px skyblue,
                        0 0 60px skyblue,
                        0 0 70px skyblue,
                        0 0 80px skyblue,
                        0 0 90px skyblue,
                        0 0 100px skyblue,
                        0 0 110px skyblue,
                        0 0 120px skyblue,
                        0 0 130px skyblue;
    }
}

色は変更してみてください。

読まなくてもいい

コピペですぐ使えますが、簡単に説明します。

このアニメーションをCSSで表現するには2つの設定が必要となります。

animationプロパティ

animationプロパティ：アニメーションの詳細を設定します。

今回の例では：animation: twinkle 4.6s linear infinite;

animation-name　…　アニメーション名（今回はtwinkle）
animation-duration　…　アニメーション1回分の時間の長さ（初期値は0、単位は「秒(s)」または「ミリ秒（ms）」で指定します。今回は4.6秒で、修正してもいいです。）
animation-timing-function　…　アニメーションの動き方（今回はlinear。最初から最後まで同じ速度です。）
animation-iteration-count　…　繰り返す回数（初期値は1ですが、今回は無限に繰り返します。）

@keyframes

@keyframesはアニメーションの始まりと終わりの状態を指定するCSSプロパティの値を時間軸に沿って変化させることができます。

@keyframesのあとにanimationプロパティで指定した名前を書くことによって紐付けます。

おまけにシンプルな点滅アニメーションを紹介します。これを見たら、@keyframesのことを理解できると思います。

@keyframes blink {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

0%がアニメーションの始まりで、opacity: 0です。（要素は透明）

100%がアニメーションの終わりで、opacity: 1です。（要素は不透明）

例えば、このサイトはhttps://codinghaku.com/です。

<p>例えば、このサイトは<span class="haku-blink">https://codinghaku.com/</span>です。</p>

.haku-blink {
    color:red;
    animation: blinking 1s ease-in-out infinite alternate;
}
@keyframes blinking {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

以上です。

もしご質問やご不明な点、誤字脱字などございましたら、お気軽にお問い合わせください。今後の記事作成にも役立たせていただきます。