【初心者向け】点滅するアニメーションをCSSで作る

どうも7noteです。点滅するアニメーションの作り方

シンプルな点滅のアニメーションの作り方です。

見本

ソース

index.html

<p>ゲームを始める<span>TAP!!</span></p>

style.css

span {
  color: #f00;
  font-size: .8em;
  vertical-align: top;
  animation : blinking 1s;             /* アニメーションを1秒間隔で行う */
  animation-iteration-count: infinite; /* 繰り返し回数を無限にする */
  animation-direction: alternate;      /* アニメーションを最初から、最後から交互に再生する */
}

/* アニメーション（右から左に移動） */
@keyframes blinking{
  0% { 
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

解説

アニメーションを1秒ごとに再生します。
1秒は0%→100%に行くのが1秒なので、往復設定をしているアニメーションでは1周するのに2秒かかっています。

animation-iteration-count: infinite;を指定して、無限に繰り返しを行っています。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ