WEB制作とゲーム開発のブログ

INWAN'S LABO

CSS/JavaScriptで文字をアニメーションさせる方法

1文字ずつアニメーション

文字をアニメーションさせて目立たせるやり方です。

見出しに使ったりワンポイントに使ったりいろいろできると思います。

 

この記事では以下のpタグの文字をアニメーションさせていきます。

<p id="text">あいうえお</p>

文字の色を変える

色を変える

まずは簡単な色を変えるアニメーションです。

#text {
    animation: color-loop 1s infinite;
}
@keyframes color-loop {
    0% {
        color: red;
    }
    50% {
        color: blue;
    }
    100% {
        color: red;
    }
}

「animation: color-loop 1s infinite」はcolor-loopを1秒間で繰り返し(infinite)行うという意味です。

@keyframesは時間のどの割合の時に何を変更するかを指定します。赤から50%で青になり100%で赤に戻るという内容です。

もちろんこの割合をもっと細かく設定したり色の数を増やしたりできます。

文字を拡大縮小させる

スケール

#text {
    display: inline-block;
    animation: scale-loop 1s infinite;;
}

@keyframes scale-loop {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(2, 2);
    }
    100% {
        transform: scale(1, 1);
    }
}

scale()で拡大縮小をさせることができます。拡大縮小したい倍率を指定すればOKです。(X方向 、Y方向)になっています。

一つ注意なのが「display: inline-block」を指定しておく必要があることです。これが無いと変化する幅が文字列の幅より大きくなってしまいX軸方向で大きくずれてしまいます。

文字を回転させる

回転

#text {
    display: inline-block;
    animation: rotate-loop 1s infinite linear;
}
@keyframes rotate-loop {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

linearは変化を等間隔で変化するようにする指定です。

scaleは度(degree)で指定します。マイナスの値にすると反対に回ります。

一文字ずつずらしてアニメーションさせる

1文字ずつアニメーション

最後に文字列を一文字ずつずらしてアニメーションさせてみます。

まずはCSSはこんな感じです。

#text {
    /*今回は無しです*/
}
#text span {
    display: inline-block;
    animation: scale-loop 1s infinite linear;
}
#text span:nth-child(2) {
    animation-delay: 0.1s;
}
#text span:nth-child(3) {
    animation-delay: 0.2s;
}
#text span:nth-child(4) {
    animation-delay: 0.3s;
}
#text span:nth-child(5) {
    animation-delay: 0.4s;
}

span:nth-child(n)は文字の数だけ用意しておきます。今回は5文字なので5までしか作っていません(1は遅らせる必要が無いのでありません)。

animation-delayはアニメーションを遅らせたい時間です。

 

次にjavascript。

window.addEventListener("load", function(){
    textAnimation();
});
function textAnimation(){
    var elm = document.getElementById("text");
    var text = elm.innerHTML;
    for(let i = 0; i < text.length; i++){
        html += "<span>" + text[i] + "</span>"
    }
    elm.innerHTML = html;
}

id=textの文字を取得して文字を分割してspanタグで挟んでいます。

これで一文字ずつ指定した時間分遅れてアニメーションします。

javascriptだけでやってみた

上のサンプルのjavascriptを改造してcssを減らして楽にできるようにしてみました。

window.addEventListener("load", function(){
    textAnimation("text", 0.1);
});
function textAnimation(id, delayTime){
    var elm = document.getElementById(id);
    if(!elm)return;
    var text = elm.innerHTML;
    elm.innerHTML = "";
    for(let i = 0; i < text.length; i++){
        const span = document.createElement('span');
        const node = document.createTextNode(text[i]);
        span.appendChild(node);
        span.style.animationDelay = delayTime * i + 's';
        elm.appendChild(span);
    }
}

これならCSSの「span:nth-child(n)」の部分をわざわざ記述する必要が無くなってとても楽ちんです。

引数でidと時間の間隔も指定できるようにしたので使い勝手もかなり良くなりました。

もうちょっと派手にしてみた

最後に色も追加して派手に目立つようにしました。

See the Pen
文字アニメーション
by いんわん (@inwan78)
on CodePen.