animationプロパティを使ったテキストが無限に流れるニュースティッカー【CSS】

Webサイトで見かける左から右へ、右から左へテキストが流れるニュースティッカーが、JSを使用しなくてもCSSでも簡単に作れます。
今回はCSSのanimationプロパティを使った方法を解説していきます。

今回作成したニュースティッカー

まずは今回作成したニュースティッカーの完成形をご覧ください。
作成したものは、右から左に流れるニュースティッカーとなります。

このような形で、設定したテキストをニュースティッカーのように流す事が可能です。
HTMLやCSSの詳しい内容は次の項目で解説していきます。

ニュースティッカーのHTMLとCSS

次に、先ほどご覧いただいたニュースティッカーのHTMLとCSSを解説していきます。
HTMLとCSSは以下の通りとなります。

<div class="ticker">
    <ul>
        <li>ここにニュースが流れます。</li>
        <li>ここにニュースが流れます。</li>
        <li>ここにニュースが流れます。</li>
        <li>ここにニュースが流れます。</li>
        <li>ここにニュースが流れます。</li>
        <li>ここにニュースが流れます。</li>
        <li>ここにニュースが流れます。</li>
    </ul>
    <ul>
        <li>ここにニュースが流れます。</li>
        <li>ここにニュースが流れます。</li>
        <li>ここにニュースが流れます。</li>
        <li>ここにニュースが流れます。</li>
        <li>ここにニュースが流れます。</li>
        <li>ここにニュースが流れます。</li>
        <li>ここにニュースが流れます。</li>
    </ul>
</div>

.ticker {
    white-space:nowrap;
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.ticker ul {
    display: flex;
    align-items: center;
    animation: ticker 20s linear infinite;
}
.ticker li {
    margin-right: 20px;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

上記のように、.tickerでwidthとheightを指定し、white-space:nowrap;で改行禁止、overflow: hidden;ではみ出した部分を非表示にしています。
.tickerと子要素のulをdisplay: flex;にしているのは2つのulとその子要素のliを横並びにする為で、flexで複数要素を横並びにする為にheightの指定をしています。

ulが2つあるのは、2つのulを横並びにして流して1つのulが流れ終わったらまた、元の位置に戻るようにアニメーションを設定している為となります。

テキストが短かったり、liの数が少ないと、途中で空白が出来てしまいますので、ワイドモニター等を考慮して多めのテキストを記述してあげてください。(同じ内容が続いてしまうのでSEO的にはあまりいいとは言えないのですが)

次に、animationプロパティとkeyframesについて詳しく解説していきます。

animationプロパティとkeyframesについて

続いてanimationプロパティとkeyframesについてです。
keyframesでアニメーションの内容を指定し、animetionプロパティでどのアニメーションか、速度や動き方(イージング)や繰り返しにするかどうかを指定します。

keyframes

先程の解説のように、keyframesはアニメーションの内容となります。

@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

上記の内容は、「@keyframes ticker」でtickerというアニメーションの名前を定義しています。アニメーションの名前は自由に決めて問題ありませんが、出来るだけどのように内容かわかるように指定した方がいいかと思います。

続いて0%や100%という部分ですが、アニメーションの始まり(0%)・アニメーションの終わり(100%)となり、今回のアニメーションの場合は0%の時にtransform:translateX(0);、100％の時にはtransform:translateX(-100%);となるように動きます(右から左へ動く)。

この0％や100％は自由に追加・変更ができ、50%から徐々に透明にしたいという場合は以下のようになります。

@keyframes ticker {
    0% {
        transform: translateX(0);
    }
    50% {
        opacity: 1.0;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

animationプロパティ

続いてanimationプロパティについてです。
今回使用したanimationプロパティは以下となります。

animation: ticker 20s linear infinite;

上記の内容では、4つの値が設定されています。

1つ目の「ticker」が、先ほどのkeyframesで定義したアニメーションの名前となり、この指定したアニメーションを実行します。

2つ目の「20s」はアニメーションを終わるまでの時間となります。この時間は短ければティッカーの速度が速くなり、長ければ遅くなります。

3つ目の「linear」はイージング(動きの加減速)を指定しています。
イージングの種類として徐々に加速する「ease-in」や徐々に遅くなる「ease-out」、自身でイージングの内容を決められる「cubic-bezier」などがありますが、今回は均等の速度にしたいので「linear」を指定しています。

4つ目の「infinite」はアニメーションの繰り返し回数を示しています。
「infinite」は制限無く繰り返すものとなり、1回だけなどの回数を指定する事も可能です。

流れる向きを左から右に変更する

先程は右から左へテキストを流していましたが、左から右へ流す事も可能です。
左から右に流す場合は以下のようにkeyframesを指定します。

@keyframes ticker {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}

このように、動く向きや距離、その他の動きを加える事でいろいろなアニメーションをする事が出来るようになっています。

さいごに

いかがでしたでしょうか。
今回はanimationプロパティを使ったテキストが無限に流れるニュースティッカーを解説しました。

今回のニュースティッカーに限らず、animationプロパティとkeyframesの仕様で、様々なアニメーションを作る事が可能です。内容を理解し、いろいろなアニメーションに挑戦してみてください。