※当サイトにはプロモーションが含まれています。
クライアント 文字を点滅させるCSSを作成してくれ
にゃテック おけまるだにゃ。
最近はあまり見かけませんが、CTA（Call To Action）のボタンの上に「点滅する文字テキスト」が使われていることがあります。
詳しくはこちらにゃ！
今回は、このような点滅する文字テキストを、CSSアニメーションのみで作成してみました（JavaScriptは使いません）。
３パターン作ってみたのでご確認ください。
テキストを点滅させるCSSアニメーション３つ
シンプルに文字が一定の間隔で点滅する文字テキストです。
/* 文字の点滅 */
.nya-blinking {
animation: nya-blinkRhythm 3s infinite;
}
@keyframes nya-blinkRhythm {
0% { opacity: 1; }
10% { opacity: 0; }
20% { opacity: 1; } /* ここで1回目の素早い点滅終了 */
30% { opacity: 0; }
40% { opacity: 1; } /* ここで2回目の素早い点滅終了 */
70% { opacity: 0; }
100% { opacity: 1; } /* ゆっくり1回点滅（間を空ける） */
}これを適用すると下記のようになります。
詳しくはこちらにゃ！
@keyframesのパーセンテージの値を変更することで点滅の間隔を調整することができます。
にゃのらいと 続いて、文字の色が変わる（文字の色が点滅する）CSSだにゃ。
.nya-color-blinking {
animation: nya-colorBlinkRhythm 3s infinite;
}
@keyframes nya-colorBlinkRhythm {
0% { color: black; }
10% { color: red; }
20% { color: black; } /* 1回目素早い色変化終了 */
30% { color: red; }
40% { color: black; } /* 2回目素早い色変化終了 */
70% { color: red; }
100% { color: black; } /* ゆっくり色変化 */
}これを適用すると下記のようになります。
色が変わるにゃ！
@keyframesで、色を変更したり、色を増やすこともできます。
にゃのらいと 最後に、文字の色にあわせて、文字テキストも変わるCSSだにゃ。
.nya-signal {
font-size: 1.6em;
position: relative;
height: 2em; /* 高さ固定して、ズレ防止 */
}
.nya-signal::after {
content: "止まれ";
color: red;
animation: nya-signalChange 6s infinite;
display: inline-block;
}
@keyframes nya-signalChange {
0% {
content: "止まれ";
color: red;
}
33% {
content: "注意";
color: orange;
}
66% {
content: "進め";
color: blue;
}
100% {
content: "止まれ";
color: red;
}
}
これを適用すると下記のようになります。
注意点としては、CSSのcontentを使用して、文字を表示させているので、タグの中身は下記のように空になります。
<p class="nya-signal"></p>ワードプレスの場合、空のタグは自動削除されてしまうことがあるので、消されないように半角スペースなどを入れておくと安心だにゃ。
もちろん、contentの内容を書き換えれば、ご自身の好きな文字を点滅させることが可能です。
点滅の速度（サイクル）を調整したい場合は、animationの秒数（●s）を変更してください。
ここで使われているsは、秒（second）を表しています。
にゃテック 動きのあるアニメーションと組み合わせることで、他にも色々なことができると思うにゃ！
前回、Photoshopを使って、このようなGIFアニメーションの矢印を作りました。 今回は、2つの矢印が繰り返し動くアニメーションをCSSで作ってみました。 繰り返し動く矢印アニメーションのCSS 繰り返し動く矢印アニ …
