コーディングをしてた際に、ボタンやTEL、問い合わせなどの要素を後から目立たせたい（※指マークやマウスポインタでクリックするような動作）という発注が来たので、CSSのanimationを使用して画像やアイコンがサッと切り替わる点滅のようなものが出来ないかと思い、調べてみました。 この方法よりもっと簡単なものがあるかも知れませんが、１つの方法として見て頂ければと思います。

動作サンプル

0120-000-000

メリット

  • あとから導入が可能
  • CSSのみで実装が可能
  • GIFアニメを作る必要がない
  • PNGが使用できるので、透過処理がきれい
  • 切り替わりタイミングなども、あとから調整が可能
  • 表示する場所の微調整がいつでも出来る

実装コード

HTML

<div class="tel">
	0120-000-000
	<img src="/images/point01.png" class="p01">
	<img src="/images/point02.png" class="p02">
</div>

CSS

.tel {
	color: #666;
	font-size: 4.6rem;
	font-weight: bold;
	display: inline-block;
	position: relative;
}
.tel .p01 {
	position: absolute;
	opacity: 1;
	bottom: -15px;
	right: -42px;
	animation-name: ani1;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(1, end);
}
.tel .p02 {
	position: absolute;
	opacity: 0;
	bottom: -15px;
	right: -60px;
	animation-name: ani2;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(1, end);
}
@keyframes ani1 {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}
@keyframes ani2 {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes と animation-timing-function: steps(1, end); が今回のポイントになります。
animation-timing-function を指定しなかった場合、フェードイン・フェードアウトしてしまうため、このような書き方にしてみました。

今回、２つの画像を切り替えています。
position: absolute; にして位置を調整していますので、このコードをそのまま持って行った際は、top, bottom, right, left で調整しなおしてください。