Web制作 CSS

CSSアニメーションでテキストやボーダーを点滅させる方法

テキストやボーダーを簡単に点滅させる方法ない?

先日行っていた案件でクリックを促すようにボタン周りを点滅させて欲しいという要望があったので、今回はその方法について解説していきたいと思います。

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


CSSアニメーションでテキストやボーダーを点滅させる方法

それではまず今回の完成形を見てみましょう。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

今回作成したのは以下になります。

  • ボックスのborder色変更(aタグ)
  • 円形のborder色変更(aタグ)
  • テキストの透過率変更(pタグ)
  • テキストの色変更(pタグ)

CSSアニメーション自体はいろいろな事が出来ますが、今回は色と透過率の変化だけ解説していきます。

 

CSSの『animation』を使う

今回の点滅は『最初から常に点滅を繰り返す』という物です。

そしてこれはCSSのみで実現可能です。

まずHTMLを見てみます。

<a href="" class="btn">ボタン</a>
<p class="text-opacity">透過点滅</p>
<p class="text-color">色変更点滅</p>

次にCSSです(レイアウトのためのスタイルは省略)

/* ボタンのアニメーション */
@keyframes blinkBorder {
  0% {
    border: 6px solid #cc2200;
  }
  100% {
    border: 6px solid #efefef;
  }
}
.btn {
  animation: blinkBorder 1s ease infinite alternate;
}
/* テキストのアニメーション(透過率変更) */
@keyframes blinkOpacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.text-opacity {
  animation: blinkOpacity 1s ease-in-out infinite alternate;
}
/* テキストのアニメーション(色変更) */
@keyframes blinkColor {
  0% {
    color: #00bfff;
  }
  100% {
    color: #cc2200;
  }
}
.text-color {
  animation: blinkColor 1s ease-in-out infinite alternate;
}

ここでポイントとなるのは@keyframesの部分です。

ここでアニメーションの開始が0%、終了が100%となります。

今回はボーダーの色を点滅させるので、以下のように設定します。

  • ボタン:開始時の色は『#cc2200』、終了時の『#efefef』
  • テキスト1:開始時の透過率は『0%』、終了時の透過率は『100%』
  • テキスト2:開始時の色は『#00bfff』、終了時の『#cc2200』

そしてこの変化をアニメーションによって滑らかに変化させます。

それぞれ@keyframesのあとのblinkBorderblinkOpacityは任意なので分かりやすい名前で大丈夫です。

そしてアニメーションの動きをanimationというプロパティを使って再現します。

animationというプロパティはanimation関連のプロパティを一括で指定するショートハンドプロパティです。

backgroundみたいなものですね。

ここでは以下のように設定しています。

  • blinkBorder → アニメーションの名前
  • 1s → アニメーションが始まってから終わるまでの時間
  • ease → アニメーションの変化の仕方
  • infinite → アニメーションの繰り返し回数(初期値は1で『infinite』は無限)
  • alternate → アニメーションの再生方向を指定

最後のalternateがイメージしにくいかと思いますが、alternate順方向と逆方向のアニメーションを交互に繰り返します。

これを設定していないと開始から終了までは滑らかにアニメーションしますが、終了後はパッと戻ってしまいます。

戻るときも滑らかにアニメーションさせたい時は必要な項目となります。

最後にプロパティを変えるとどうなるか見てみましょう。

『アニメーションの変化の仕方』と最後に『アニメーションの再生方向を指定』だけ変化させてみます(時間を短くするとチカチカするのでゆっくり1.5秒に設定)

See the Pen
CSSアニメーションサンプル
by junpei (@junpei-sugiyama)
on CodePen.

『アニメーションの変化の仕方』については大きくは変わらないように見えるかも知れませんが『アニメーションの再生方向を指定』はalternateでないと点滅にはならないのが分かると思います。

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, CSS
-