CSS 过渡适用于 IE，但不适用于 Firefox、Chrome 和 Opera [重复]
Posted
技术标签:
【中文标题】CSS 过渡适用于 IE，但不适用于 Firefox、Chrome 和 Opera [重复]【英文标题】：CSS Transition works in IE, but not in Firefox, Chrome nor Opera [duplicate] 【发布时间】：2018-12-13 14:39:43 【问题描述】：早上好：
按钮中的 CSS 转换命令有几个问题。我正在尝试使用过渡效果更改背景颜色，但令人惊讶的是它只适用于 Internet Explorer，而在 Firefox、Chrome 或 Opera 中不起作用，我不知道为什么。
我的代码：
#button_example
background: -webkit-linear-gradient(#0CA5E2, #FFFFFF); /* For Safari 5.1 to 6.0 - Chrome, Safari, android, ios*/
background: -o-linear-gradient(#0CA5E2, #FFFFFF); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#0CA5E2, #FFFFFF); /* For Firefox 3.6 to 15 */
background: linear-gradient(#0CA5E2, #FFFFFF); /* Standard syntax */
background: -ms-linear-gradient(top, #0CA5E2 0%, #FFFFFF 100%); /* IE10+ */
border-radius: 5px;
-webkit-box-shadow:0px 1px 1px #DEDEDE;
-moz-box-shadow:0px 1px 1px #DEDEDE;
box-shadow:0px 1px 1px #DEDEDE;
/* margin-left: 5px; */
margin-top: 10px;
width: 280px;
height: 40px;
font-size: 1.5em;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
#button_example:hover
background: -webkit-linear-gradient(#FFFFFF, #0CA5E2); /* For Safari 5.1 to 6.0 - Chrome, Safari, Android, iOs*/
background: -o-linear-gradient(#FFFFFF, #0CA5E2); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#FFFFFF, #0CA5E2); /* For Firefox 3.6 to 15 */
background: linear-gradient(#FFFFFF, #0CA5E2); /* Standard syntax */
background: -ms-linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* IE10+ */
border-radius: 5px;
-webkit-box-shadow:0px 1px 1px #DEDEDE;
-moz-box-shadow:0px 1px 1px #DEDEDE;
box-shadow:0px 1px 1px #DEDEDE;
/* margin-left: 5px; */
margin-top: 10px;
width: 280px;
height: 40px;
font-size: 1.5em;
<button id="button_example" type="button" onclick="window.location.href='www.google.es'">Google</button>我不知道该怎么做，我查看了所有教程，但没有一个能解决我的问题。请问有什么解决办法吗？
谢谢。
【问题讨论】：
我想你的答案在这里***.com/questions/6542212/…background-image 不可动画化。查看以下帖子以获取可能的解决方案 -> ***.com/questions/7363141/…
【参考方案1】：
#button_example
background: -webkit-linear-gradient(#0CA5E2, #FFFFFF); /* For Safari 5.1 to 6.0 - Chrome, Safari, Android, iOs*/
background: -o-linear-gradient(#0CA5E2, #FFFFFF); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#0CA5E2, #FFFFFF); /* For Firefox 3.6 to 15 */
background: linear-gradient(#0CA5E2, #FFFFFF); /* Standard syntax */
background: -ms-linear-gradient(top, #0CA5E2 0%, #FFFFFF 100%); /* IE10+ */
border-radius: 5px;
-webkit-box-shadow:0px 1px 1px #DEDEDE;
-moz-box-shadow:0px 1px 1px #DEDEDE;
box-shadow:0px 1px 1px #DEDEDE;
/* margin-left: 5px; */
margin-top: 10px;
width: 280px;
height: 40px;
font-size: 1.5em;
display: block;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
position: relative;
#button_example::after
content: "";
position: absolute;
top: 0;
left:0;
right: 0;
bottom: 0;
background: -webkit-linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* For Safari 5.1 to 6.0 - Chrome, Safari, Android, iOs*/
background: -o-linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* For Firefox 3.6 to 15 */
background: linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* Standard syntax */
background: -ms-linear-gradient(top, #FFFFFF 0%, #0CA5E2 100%); /* IE10+ */
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
z-index:1;
#button_example:hover::after
opacity: 1;
#button_example span
position: relative;
z-index:2;
#button_example:hover
border-radius: 5px;
-webkit-box-shadow:0px 1px 1px #DEDEDE;
-moz-box-shadow:0px 1px 1px #DEDEDE;
box-shadow:0px 1px 1px #DEDEDE;
/* margin-left: 5px; */
margin-top: 10px;
width: 280px;
height: 40px;
font-size: 1.5em;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
<button id="button_example" type="button" onclick="window.location.href='www.google.es'"><span>Google<span></button>由于我们还不能转换 CSS 渐变（到另一个渐变），我提供了一个使用伪元素的 lil' 解决方法。显示的过渡由 opacity 属性触发。
【讨论】：
A-M-A-Z-I-N-G！！！ 100000 谢谢！！这就是我需要的。我欠你一杯啤酒！再次感谢！ 不客气 :) 如果我的回答解决了您的问题，请将其标记为检查，这将有助于其他人快速找到解决方案。【参考方案2】：添加上面的答案：更改过渡效果中的渐变（使用背景位置）：
#button_example
background: -webkit-linear-gradient(#0CA5E2 0%, #FFFFFF 50%, #0CA5E2 100%);
/* For Safari 5.1 to 6.0 - Chrome, Safari, Android, iOs*/
background: -o-linear-gradient(#0CA5E2 0%, #FFFFFF 50%, #0CA5E2 100%);
/* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#0CA5E2 0%, #FFFFFF 50%, #0CA5E2 100%);
/* For Firefox 3.6 to 15 */
background: linear-gradient(#0CA5E2 0%, #FFFFFF 50%, #0CA5E2 100%);
/* Standard syntax */
background: -ms-linear-gradient(top, #0CA5E2 0%, #FFFFFF 50%, #0CA5E2 100%);
/* IE10+ */
border-radius: 5px;
-webkit-box-shadow: 0px 1px 1px #DEDEDE;
-moz-box-shadow: 0px 1px 1px #DEDEDE;
box-shadow: 0px 1px 1px #DEDEDE;
/* margin-left: 5px; */
margin-top: 10px;
width: 280px;
height: 40px;
font-size: 1.5em;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
background-size: 100% 200%;
background-repeat: repeat-y;
#button_example:hover
background-position: 0 100%;
<button id="button_example" type="button" onclick="window.location.href='www.google.es'">Google</button>【讨论】：
以上是关于CSS 过渡适用于 IE，但不适用于 Firefox、Chrome 和 Opera [重复]的主要内容，如果未能解决你的问题，请参考以下文章
CSS 过渡：不透明度和可见性过渡不适用于 Firefox（适用于 Chrome / Safari）
CSS3 + HTML5SHIV + CSS3PIE Border-radius 不适用于 IE8，但适用于 IE7、9、10