Question

我正在尝试动画按钮以在一秒钟内反转渐变我写了这个css代码：

button
{
background:-webkit-linear-gradient(left top,#7a7a7a, #5c5c5c);
background:-o-linear-gradient(bottom right,#7a7a7a, #5c5c5c);
background:-moz-linear-gradient(bottom right,#7a7a7a, #5c5c5c);
background:linear-gradient(to bottom right,#d8d8d8 5%, #909090 95%);
width:500px;
height:30px;
-webkit-animation: backchange 1s;
animation: backchange 1s;/*this comes last*/
}

@keyframes backchange{
from {background:-webkit-linear-gradient(left top,#8d8d8d, #909090);
background:-o-linear-gradient(bottom right,#8d8d8d, #909090);
background:-moz-linear-gradient(bottom right,#8d8d8d, #909090);
background:linear-gradient(to bottom right,#d8d8d8 5%, #909090 95%);}
to {background:-webkit-linear-gradient(left top,#909090, #8d8d8d);
background:-o-linear-gradient(bottom right,#909090, #8d8d8d);
background:-moz-linear-gradient(bottom right,#909090, #8d8d8d);
background:linear-gradient(to bottom right,#909090 5%, #d8d8d8 95%);}
}
@-webkit-keyframes backchange{
from {background:-webkit-linear-gradient(left top,#8d8d8d, #909090);
background:-o-linear-gradient(bottom right,#8d8d8d, #909090);
background:-moz-linear-gradient(bottom right,#8d8d8d, #909090);
background:linear-gradient(to bottom right,#d8d8d8 5%, #909090 95%);}
to {background:-webkit-linear-gradient(left top,#909090, #8d8d8d);
background:-o-linear-gradient(bottom right,#909090, #8d8d8d);
background:-moz-linear-gradient(bottom right,#909090, #8d8d8d);
background:linear-gradient(to bottom right,#909090 5%, #d8d8d8 95%);}
}

来自零件的部件没有像部件那样用蓝色着色，并且动画不是花费一秒钟就完成了immediatley 这是html：

<html>
<head>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
<button>this is a button</button>
</body>
</html>

请帮助我，我想知道代码有什么问题我正在使用Google Chrome

Answer 1

动画bckgrounds仍然有限的支持。特别是当您想要更改图像时（在您的情况下为渐变）

解决这个问题的一个常用技巧是动画背景位置而不是图像。

这适用于您的情况。可能是这样的：

CSS

button
{
    background-image: linear-gradient(180deg, #7d7d7d 0%, #c0c0c0 40%, #c0c0c0 60%, #7d7d7d 100%);
    background-size: 100% 300%;
    background-position: 0% 0%;
}

@-webkit-keyframes backchange{
    from {background-position: 0% 0%;}
    to {background-position: 0% 100%;}
}

动画不能使用css3（代码可能是正确的）

1 个答案:

demo