用css3實現閃爍效果

1. css3 @keyframes

　　參考 css3 @keyframes規則.

　　特別注意瀏覽器支持:

　　　　Internet Explorer 10, Firefox, 和 Opera 支持 @keyframes 屬性.

　　　　Safari和Chrome使用私有屬性@-WebKit-keyframes支持。

　　　　注意:Internet Explorer 9及更早IE版本不支持@keyframes 屬性.

　　w3school上關於瀏覽器支持的內容不正確 - 實測表明firefox支持@keyframes.

 

2. css3 animation屬性

　　參考 w3school.

 

3. css 源碼

　

@keyframes myAnimation {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

div {
  animation: myAnimation 1s infinite
}

 

使用在線工具 pleeease 產生支持各瀏覽器的css代碼.

 

@-webkit-keyframes myAnimation {
  0% {
    opacity: 0;
    filter: alpha(opacity=0)
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100)
  }
}

@keyframes myAnimation {
  0% {
    opacity: 0;
    filter: alpha(opacity=0)
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100)
  }
}

div {
  -webkit-animation: myAnimation 1s infinite;
          animation: myAnimation 1s infinite
}