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

May 27, 2010

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プロパティ未対応ブラウザでは、
点滅されずに普通に表示されるだけになります。

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

CSS3 スタンダード・デザインガイド【改訂第2版】 (Web Designing Books)
エ・ビスコム・テック・ラボ
マイナビ
売り上げランキング: 156,072
白坂翔
白坂翔

東京のWEB制作会社の代表をしています。デザイナー兼ディレクター。
JELLY JELLY CAFEというお店のオーナーでもあります。MORE

LINE@やってます

'stats.label.addfriend' (MISSING TRANSLATION)

あわせてどうぞ

湊かなえの「告白」読了(ネタバレ無し、たぶん)