无论transition还是keyframes，如何让变化更自然，这是前端应该考虑的问题。
这里，我简单总结下自己的方法。
以实践为例子。
1。图像渐变
@keyframes looppic{
from{
background:url(http://www.005.tv/uploads/allimg/160727/16-160HG44240938.png);
}
25%{
background:url(http://b.zol-img.com.cn/sjbizhi/images/8/750x530/1422008118352.jpg);
}
75%{
background:url(http://img3.duitang.com/uploads/item/201506/11/20150611192600_Stxhe.png);
}
to{
background:url(http://www.005.tv/uploads/allimg/160727/16-160HG44240938.png);
}
} .keyframeslp{ width:400px; height:200px; -webkit-animation:looppic 6s ease-in infinite; -moz--animation:looppic 6s ease-in infinite; -o--animation:looppic 6s ease-in infinite; -ms--animation:looppic 6s ease-in infinite; }
效果如下：
2.颜色渐变
代码如下
@keyframes opa{
from{
opacity:}
10%{
opacity:0.75}
20%{
opacity:0.5}
30%{
opacity:0.25;
content:text content;
color:#000000;}
40%{
opacity:}
50%{
opacity:0.25}
68%{
opacity:0.5}
85%{
opacity:0.75}
to{
opacity:}
}
.bc{
background:#F10E12;
width:100px;
height:100px;
-webkit-animation:opa 5s ease-in-out infinite;
-o-animation:opa 5s ease-in-out infinite;
-ms-animation:opa 5s ease-in-out infinite;;
-moz-animation:opa 5s ease-in-out infinite;
}
效果如下
ok ,相信大家已经看出了其中的技巧：对称设置
(很奇怪，发布后为什么没有效果了呢？？？？)