CSS3 动画

作者: 一名有马甲线的程序媛 | 来源:发表于2018-08-14 10:51 被阅读9次

需求：背景色变换

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 动画