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;}
}