[CSS3]なんでも点滅させる小ワザ

CSS3のanimationプロパティ使うと、なんでも点滅させることができます！
（現在、Chrome3以降、Safari4以降でしかサポートされていません）

とりあえず、CSSファイルに、下記ソースをコピペしてみましょう。

@-webkit-keyframes pulse {
 from {
   opacity: 1.0;/*透明度100%*/
 }
 to {
   opacity: 0.8;/*透明度80%*/
 }
}
.blinking{
-webkit-animation-name: pulse;/* 実行する名前 */
-webkit-animation-duration: 0.3s;/* 0.3秒かけて実行 */
-webkit-animation-iteration-count:infinite;/* 何回実行するか。infiniteで無限 */
-webkit-animation-timing-function:ease-in-out;/* イーズインアウト */
-webkit-animation-direction: alternate;/* alternateにするとアニメーションが反復 */
-webkit-animation-delay: 0s; /* 実行までの待ち時間 */
}

 
あとは、html内の点滅させたいタグに、class=”blinking”を追加するだけです！
上の例でいうと、透明度100％と80％間を0.3秒間隔で、いったりきたりします。

class=”blinking” を追加するだけなので、いろんなものを点滅させることができますよ！

<div class="blinking">ふつうの文字も</div>

 

<div class="blinking"><a href="#">リンクの文字も</a></div>

 
画像も！

<div class="blinking"><img src="/wp-content/uploads/2010/05/sho_icon_normal.png"  /></div>

 
animationプロパティ未対応ブラウザでは、
点滅されずに普通に表示されるだけになります。

時間や透明度など、数値を変えるだけで色々雰囲気の違う
アクションをさせることができますよ！　ぜひお試しください！