CSS3 Animation
先看一个例子 http://demo.itivy.com/css3-shine-button/index.html
首先可以看到这个效果是在完全没有鼠标hover或者其他事件的时候就存在的， 且它是不断的无线循环下去的。
呵呵 和常见的transition 不一样！
如何实现的呢？ 是使用animation啦！
<!DOCTYPE html> <html> <head> <meta name="description" content="css3 animation"> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <div id="prt1"></div> <div id="prt2"></div> <div id="prt3"></div> </body> </html>
CSS
html, body{ height:100%; } #prt1 { height:20%; border:1px solid black; top:50%; left:0%; animation:prt1 2s infinite; -webkit-animation:prt1 2s; /* display:none; */ animation-iteration-count: 1; /*动画次数*/ } @keyframes prt1 { 0% {background-color:white;} 33% {background-color:black;} 66% {background-color:white;} 100% {background-color:white;} } @-webkit-keyframes prt1 { 0% {background-color:white;} 33% {background-color:black;} 66% {background-color:white;} 100% {background-color:white;} } #prt2 { height:30%; border:1px solid black; left:0%; top:50%; animation:prt2 2s infinite; -webkit-animation:prt2 2s infinite; /* display:none; */ } @keyframes prt2 { 0% {background-color:white;} 33% {background-color:white;} 66% {background-color:black;} 100% {background-color:white;} } @-webkit-keyframes prt2 { 0% {background-color:white;} 33% {background-color:white;} 66% {background-color:black;} 100% {background-color:white;} } #prt3 { height:49%; border:1px solid black; left:0%; top:50%; animation:prt3 2s infinite; -webkit-animation:prt3 2s infinite; /* display:none; */ } @keyframes prt3 { 0% {background-color:white;} 33% {background-color:white;} 66% {background-color:white;} 100% {background-color:black;} } @-webkit-keyframes prt3 { 0% {background-color:white;} 33% {background-color:white;} 66% {background-color:white;} 100% {background-color:black;} }
