我无法使用线性渐变制作动画

Question

我制作了一个动画，应该倾斜并跳转到屏幕上的另一个位置，但渐变不会完全没有工作。

我使用了这个代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    img {
      width:100px;
      height:100px;
      background: linear gradient(red,yellow);
      color: #ffffff;
      position: relative;
      font-weight:bold;
      font-size:20px;
      padding:10px;
      border-radius:5px;
      animation:animated_div 5s 5;
      -webkit-animation:animated_div 5s 1;
         -moz-animation:animated_div 5s 1;
           -o-animation:animated_div 5s 5;
                -webkit-border-radius:5px;
    }

    @keyframes animated_div {
      0% {transform: rotate(0deg);left:0px;}
      12.5% {transform: rotate(20deg);left:0px;}
      25% {transform: rotate(0deg);left:500px;}
      27.5% {transform: rotate(0deg);left:500px;}
      35% {transform: rotate(0deg);left:500px;background:-webkit- linear-    gradient(red,yellow;}
      50% {transform: rotate(-360deg);left:0px;}
      62.5% {transform: rotate(0deg);left:0px;}
      77.5% {transform: rotate(20deg);left:0px;}
      80% {transform: rotate(0deg);left:500px;}
      90% {transform: rotate(0deg);left:500px;}
      95% {transform: rotate(0deg);left:500px;background:-webkit-linear-    gradient(Yellow,Red;}
      100% {transform: rotate(-360deg);left:0px;}
    }
    body{background-color:black;}
  </style>
</head>
<body>
  <img class="q" src="https://pbs.twimg.com/media/C3dJvIZUEAAkIjg.png">
</body>
</html>

但它不会像我想要的那样改变边框渐变。

Answer 1

您在 linear-gradient 中缺少一个连字符。

该行应为：
background: linear-gradient(red,yellow);

我无法使用线性渐变制作动画

I Can't Animate With Linear Gradients

html

css

linear-gradients

jquery-animate