どうも7noteです。点滅するアニメーションの作り方
シンプルな点滅のアニメーションの作り方です。
見本
ソース
index.html
<p>ゲームを始める<span>TAP!!</span></p>style.css
span{color:#f00;font-size:.8em;vertical-align:top;animation:blinking1s;/* アニメーションを1秒間隔で行う */animation-iteration-count:infinite;/* 繰り返し回数を無限にする */animation-direction:alternate;/* アニメーションを最初から、最後から交互に再生する */}/* アニメーション（右から左に移動） */@keyframesblinking{0%{opacity:0;}100%{opacity:1;}}解説
アニメーションを1秒ごとに再生します。
1秒は0%→100%に行くのが1秒なので、往復設定をしているアニメーションでは1周するのに2秒かかっています。
animation-iteration-count: infinite;を指定して、無限に繰り返しを行っています。
おそまつ！
~ Qiitaで毎日投稿中!! ~
【初心者向け】HTML・CSSのちょいテク詰め合わせ