Whether transition or keyframes, how to make the change more natural, this is the front-end should consider the problem.
Here, I briefly summarize my own method.
Take practice as an example.
1. Image gradient
@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; }
The effect is as follows:
2. Color Gradient
The code is as follows
@keyframes Opa{from{Opacity:1}10%{Opacity:0.75}20%{Opacity:0.5}30%{Opacity:0.25;content:text content;Color:#000000;}40%{Opacity:0}50%{Opacity:0.25}68%{Opacity:0.5}85%{Opacity:0.75} to{Opacity:1}}.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; }
The effect is as follows
OK, I believe you've seen the trick: symmetrical setting
(It's strange, why is there no effect after the release???? )
On the gradient cohesion in CSS