0

我正在尝试为按钮设置动画以在一秒钟内反转渐变我写了这个 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%);}
}

from 部分没有像 to 部分那样用蓝色着色，并且动画不需要一秒钟就完成了，这是 html：

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

请帮助我，我想知道
我使用谷歌浏览器的代码有什么问题

4

1 回答 1

0

动画背景的支持仍然有限。特别是当你想改变图像（你的情况下的渐变）

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

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

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

演示

于 2013-11-14T17:24:39.643 回答