0
我目前正試圖讓我的CSS3動畫在大多數瀏覽器中都能正常工作，但是現在我只能在Web瀏覽器上運行它。是否有可以讓CSS動畫和漸變在所有瀏覽器中都能正常工作？
這裏是我的代碼：
h1 {
font-family: 'BebasRegular', sans-serif;
font-size: 150px;
padding-bottom: 100px;
padding-top: 50px;
background: #E9AB17 -webkit-gradient(linear,left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat ;
-webkit-background-size: 75px 200px;
color: rgba(255, 255, 255, 0.1);
-webkit-background-clip: text;
-webkit-animation-name: shine;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
text-align:center;
}
因爲我已經加入到代碼中，我仍然有問題。
h1 {
font-family: 'BebasRegular', sans-serif;
font-size: 150px;
padding-bottom: 100px;
padding-top: 50px;
background: #E9AB17 -webkit-gradient(linear,left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat ;
background: #E9AB17 -moz-gradient(linear,left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat ;
background: #E9AB17 -o-gradient(linear,left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat ;
background: #E9AB17 linear-gradient(linear,left top, right top, from(#e8a917), to(#f4b011), color-stop(0.5, #fff)) 0 0 no-repeat ;
-webkit-background-size: 75px 200px;
background-size: 75px 200px; /* Chrome, Firefox 4+, IE 9+, Opera, Safari 5+ */
color: rgba(255, 255, 255, 0.1);
-webkit-background-clip: text;
background-clip: text;
-webkit-animation-name: shine;
-moz-animation-name: shine;
-o-animation-name: shine;
animation-name: shine;
-webkit-animation-duration: 5s;
-moz-animation-duration: 5s;
-o-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
text-align:center;
}
@-webkit-keyframes shine
{
0%
{
background-position: bottom left;
}
28%,100%
{
background-position: top right;
}
}
@-moz-keyframes shine {
0%
{
background-position: bottom left;
}
28%,100%
{
background-position: top right;
}
}@-o-keyframes shine {
0%
{
background-position: bottom left;
}
28%,100%
{
background-position: top right;
}
}@keyframes shine {
0%
{
background-position: bottom left;
}
28%,100%
{
background-position: top right;
}
}
'-webkit-'是（正如你可能已經猜到了）一個Webkit的供應商名稱。你需要添加'-moz-'，'-o-'，'-ms-'和前綴。 – Blender
我曾試過這個，因爲我認爲這將是簡單的問題，但由於某種原因，它不起作用，標題出現沒有顏色。 – fabregilkas
你是怎麼嘗試的？ – Blender