ボタンをアニメーション化してグラデーションを 1 秒で反転させようとしています。この 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 パーツのように青く着色されておらず、アニメーションは1秒もかからず、すぐに完了します。これはhtmlです:
<html>
<head>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
<button>this is a button</button>
</body>
</html>
助けてください。Google chrome を使用しているコードの何が問題なのか知りたいです。