【发布时间】：2013-05-21 09:21:58
【问题描述】：
我目前正在尝试让我的 CSS3 动画在大多数浏览器上运行，但目前我只能让它在 web kit 浏览器上运行。
这是我的代码：
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-，并且没有前缀。 -
我已经尝试过了，因为我认为这将是一个简单的问题，但由于某种原因它不起作用并且标题显示没有颜色。
-
我已经复制了所有的 webkit 元素并使用 moz 制作了新的元素进行测试。这不起作用，所以我直接将 webkit 更改为 moz 并在 firefox 上对其进行了测试。还是一无所获。
标签： css-animations