CSS3 动画

需求：背景色变换

html:

<div class="refreshAuto"></div>

css:

.refreshAuto{
  width :100px;
  height:100px;
  animation:myfirst 3s linear 0s infinite alternate;
  /* Firefox: */
  -moz-animation:myfirst 3s linear 0s infinite alternate;
  /* Safari and Chrome: */
  -webkit-animation:myfirst 3s linear 0s infinite alternate;
  /* Opera: */
  -o-animation:myfirst 3s linear 0s infinite alternate;
}
@keyframes myfirst
{
0%   {background:#3b547f;}
100% {background:#409EFF;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background:#3b547f;}
100% {background:#409EFF;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background:#3b547f;}
100% {background:#409EFF;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background:#3b547f;}
100% {background:#409EFF;}
}

参考文献：CSS3 动画