CSS css3按钮背景色无限过渡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10843880/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css3 button background color infinite transition
提问by Eric Pigeon
Is there a way to make a button's background color fade from grey to blue then back to gray using only css3? A good example is a default action button is cocoa? I know this can be done in javascript but I'd rather only use css for this.
有没有办法只使用 css3 使按钮的背景颜色从灰色渐变为蓝色，然后再回到灰色？一个很好的例子是默认操作按钮是可可？我知道这可以在 javascript 中完成，但我宁愿只为此使用 css。
回答by Shailender Arora
Hi i have made the button through CSS3 Animation please have look i hope its near to your question:-
嗨，我已经通过 CSS3 动画制作了按钮，请看看我希望它接近您的问题：-
HTML
HTML
<input type="submit" value="submit" class="button" />
CSS
CSS
.button {
width:100px;
height:20px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s infinite; /* Firefox */
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
}
@-moz-keyframes myfirst /* Firefox */ {
0% {background:red;}
50% {background:yellow;}
100% {background:red;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */ {
0% {background:red;}
50% {background:yellow;}
100% {background:red;}
}
see the demo:- http://jsbin.com/osohak/7/edit
看演示：- http://jsbin.com/osohak/7/edit
read more about CSS3 Transitions & Animation http://css3.bradshawenterprises.com/cfimg/
阅读有关 CSS3 过渡和动画的更多信息http://css3.bradshawenterprises.com/cfimg/
回答by Tooraj Jam
If you need fade animation on hoveror such things, CSS3 transition propertyis your solution.
如果您需要淡入淡出动画hover或类似的东西，CSS3 过渡属性是您的解决方案。
EDIT:
编辑：
.btn {
background-color: lightblue;
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
-moz-transition: all 0.3s ease-out; /* FF4+ */
-ms-transition: all 0.3s ease-out; /* IE10 */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
transition: all 0.3s ease-out;
}
.btn:hover {
background-color: lightgreen;
}
