有没有让CSS动画和渐变在所有浏览器中工作?

时间:2013-05-21 00:50:10

标签: css-animations

我目前正在尝试让我的CSS3动画在大多数浏览器中都能正常工作,但是我只是在网络工具包浏览器上才能使用它。

这是我的代码:

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;
}
}    

1 个答案:

答案 0 :(得分:0)

Colorzilla

我猜这可能是你对渐变所需要的。

动画 here

有关CSS兼容性的更多信息,请参阅 的 here