css3 アニメーション　点滅

■HTML

<div class=”blinking1″><span style=”color: #ff0000;”><strong>すぐに文字を点滅</strong></span></div>
<div class=”blinking2″><span style=”color: #ff0000;”><strong>0.15秒後にに文字を点滅</strong></span></div>
<div class=”blinking3″><span style=”color: #ff0000;”><strong>0.2秒かけて文字を点滅</strong></span></div>

■対応ブラウザ

主要ブラウザの最新バージョンはすべて対応しています。
webkit系のブラウザ(Chrome,Safari,Opera,iOS Safari,Androidブラウザ)は、ベンダープレフィックス「-webkit-」が必要です。
IE9以下は非対応です。

 

■CSS

@keyframes pulse {
from {
opacity: 1.0;/*透明度100%*/
}
to {
opacity: 0.5;/*透明度50%*/
}

 

@-webkit-keyframes pulse {

from {
opacity: 1.0;/*透明度100%*/
}
to {
opacity: 0.5;/*透明度50%*/
}
}

.blinking1{

animation-name: pulse;/* 実行する名前 */
animation-duration: 0.3s;/* 0.3秒かけて実行 */
animation-iteration-count:infinite;/* 何回実行するか。infiniteで無限 */
animation-timing-function:ease-in-out;/* イーズインアウト */
animation-direction: alternate;/* alternateにするとアニメーションが反復 */
animation-delay: 0s; /* 実行までの待ち時間 */

-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; /* 実行までの待ち時間 */

/* 以下アニメーションとは直接関係ない */
height: 3em;
}

.blinking2{

animation-name: pulse;/* 実行する名前 */
animation-duration: 0.3s;/* 0.3秒かけて実行 */
animation-iteration-count:infinite;/* 何回実行するか。infiniteで無限 */
animation-timing-function:ease-in-out;/* イーズインアウト */
animation-direction: alternate;/* alternateにするとアニメーションが反復 */
animation-delay: 0.15s; /* 実行までの待ち時間 */

-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: 0.15s; /* 実行までの待ち時間 */

/* 以下アニメーションとは直接関係ない */
height: 3em;
}

.blinking3{

animation-name: pulse;/* 実行する名前 */
animation-duration: 0.2s;/* 0.2秒かけて実行 */
animation-iteration-count:infinite;/* 何回実行するか。infiniteで無限 */
animation-timing-function:ease-in-out;/* イーズインアウト */
animation-direction: alternate;/* alternateにするとアニメーションが反復 */
animation-delay: 0s; /* 実行までの待ち時間 */

-webkit-animation-name: pulse;/* 実行する名前 */
-webkit-animation-duration: 0.2s;/* 0.2秒かけて実行 */
-webkit-animation-iteration-count:infinite;/* 何回実行するか。infiniteで無限 */
-webkit-animation-timing-function:ease-in-out;/* イーズインアウト */
-webkit-animation-direction: alternate;/* alternateにするとアニメーションが反復 */
-webkit-animation-delay: 0s; /* 実行までの待ち時間 */

/* 以下アニメーションとは直接関係ない */
height: 3em;
}

ulの中のliに<li class=”blinking1″>という風に指定しても使えるよ

• すぐに文字を点滅

注意！！　add CSSにさまざまなCSSを追記する場合は冒頭に記述

@-webkit-keyframes pulse {
from {
opacity: 1.0;/*透明度100%*/
}
to {
opacity: 0.5;/*透明度50%*/
}
}
.blinking1{
-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; /* 実行までの待ち時間 */

/* 以下アニメーションとは直接関係ない */
height: 3em;
}

を後ろの方に記述すると動かなかった。

 

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

http://www.will-hp.com/wpblog/web/72/

http://weback.net/htmlcss/2108/#contents-3 →このサイトが大変詳しく書いてある