パソ君
・CSSを使ってテキストを点滅させる方法は？
こんな疑問にお答えします。
案件によってはテキストやボタンを、点滅させる場合があるんですよね。
これ実はCSSのみで実装可能です。
ジト
すぐにできるよ！
ということで、この記事では「CSSアニメーションでテキスト等を点滅させる」について解説していきます！
この記事でわかること
CSSアニメーションでテキスト等を点滅させる
目次
【解説】CSSアニメーションでテキスト等を点滅させる【コピペOK】
そんなテキストやボタンが点滅するアニメーションのサンプルがこちら↓
See the Pen 点滅する要素達 by jito-coder (@jito-coder) on CodePen.
<div class="blinking">
<a href="" class="blinking__btn">点滅するボタン</a>
<p class="blinking__text">点滅するテキストです</p>
</div>.blinking__btn {
display: block;
font-size: 16px;
line-height: 1.5;
text-decoration: none;
width: min(100%, 300px);
margin-inline: auto;
padding: 1em 0.5em;
color: #fff;
background-color: orange;
animation: blinking 1s ease infinite alternate;
}
.blinking__text {
font-size: 24px;
line-height: 1.5;
margin-top: 3em;
animation: blinking 1.5s ease infinite alternate;
}
@keyframes blinking {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}コードの中で重要な点がこちら↓
- @keyframesで点滅アニメーションを定義
- animationプロパティを使って秒数等を指定
順に解説してきます。
まず「@keyframes」を使って、点滅アニメーションを定義します。
今回はopacityで透過率を変えて、点滅させるように指定。
下記の感じですね↓
@keyframes blinking {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}あとは定義した「blinking」というアニメーションを、要素に指定すればOK。
秒数や変化を下記のように指定します↓
.blinking__text {
animation: blinking 1.5s ease infinite alternate;
}この場合「blinkingというアニメーションを、1.5秒かけて交互にゆっくり繰り返して行う」となります。
「alternate」を記述することで、アニメーションが戻るときもゆっくり変化させることが可能です。そのため忘れずに記述すべし。
これで点滅するアニメーションが完成しました！
【解説】CSSアニメーションでテキスト等を点滅させる【コピペOK】：まとめ
- @keyframesで点滅アニメーションを定義
- animationプロパティを使って秒数等を指定
ジト
点滅アニメーションをCSSで実装する時はためしてみてね！
