CSSで文字などを点滅させる方法アニメーションを使った方法

CSSで、文字や要素を点滅させようとおもったらCSS3のopacityとanimationを使うと実現出来ます
IE10以下等、ブラウザによっては表示されなかったりします
対応しているブラウザでのみ動作します

アニメーションを使った CSSで点滅をさせる方法

これは実際の動作をGIFアニメにしたものです

アニメーションの設定コード

@-webkit-keyframes blink {
 from {
 opacity: 1;
 }
 to {
 opacity: 0;
 }
}
.tenmetu p,.tenmetu2{
-webkit-animation-name: blink;/* keyframe名 */
-webkit-animation-duration: 1s;/* アニメーションにかける時間 */
-webkit-animation-iteration-count:infinite;/*infiniteで無限ループ */
-webkit-animation-timing-function:ease-in-out;/* イーズインアウト */
-webkit-animation-direction: alternate;/* alternateにするとアニメーションが反復 */
-webkit-animation-delay: 0s; /* 実行までの待ち時間 */
}

解説

まず @-webkit-keyframes blink でアニメーションの対象となるプロパティを決めます
blinkがアニメーションの名前になります

opacityを1から0へと変化させています
opacityは1で不透明、0で完全に透明になるものです

次に .tentou p,.tentou2以下はアニメーションの内容を決めています
.tentou p,.tentou2 {}でこれにアニメーションを付けるということになります。ここでクラス名を変えれば他のものをアニメーションの対象に出来ます

あとはアニメーションの内容を設定します、まずはkeframe名に対象のキーフレーム、アニメーション名のblinkを指定

animation-direction: alternate;でアニメーションを往復させます
つまり opacity1から0、0から1というアニメーションになります。あとはこれが無前ループすれば常に点滅することになります

クラス名で指定するので、要素でも文字でも画像でもアニメーションで点滅させることが可能です。