html - 如何更流畅地动画化元素内背景渐变的旋转？

Question

我有一个按钮，我想通过旋转它来设置背景动画:

.gradient-button {
  animation: rotate-gradient 1s infinite;
  background-image: linear-gradient(0deg, red, yellow, green);
}

@keyframes rotate-gradient {
  0% {
    background-image: linear-gradient(0deg, red, yellow, green);
  }
  /* Adding a step in the middle */
  20% {
    background-image: linear-gradient(60deg, red, yellow, green);
  }
  40% {
    background-image: linear-gradient(120deg, red, yellow, green);
  }
  60% {
    background-image: linear-gradient(180deg, red, yellow, green);
  }
  80% {
    background-image: linear-gradient(240deg, red, yellow, green);
  }
  100% {
    background-image: linear-gradient(300deg, red, yellow, green);
  }
}

<button id="fill" class="gradient-button">Fill Form</button>

但是只有6个步骤，动画不流畅，手动添加24帧适得其反。

或者我尝试了 JS:

$(document).ready(function () {
    AnimateRotate(360);
});


function AnimateRotate(d){
    var elem = $("#mybutton");

    $({deg: 0}).animate({deg: d}, {
        duration: 2000,
        step: function(now){
            elem.css({
                 "background-image":"linear-gradient("+now+"deg, red, yellow, green);"
            });
        }
    });
}

但这什么也没做。 问:如何让这个动画流畅？ 运行代码:https://codepen.io/anon/pen/OaojNP

Answer 1

如果是我的话，我可能会采用不同的方法来产生幻觉，因为线性渐变很难在不逐步完成每个属性更改的情况下制作平滑的关键帧动画。相反，作为一种替代方法，也许对伪元素的转换可以给出相同的预期结果？

因此；

.gradient-button {
  position: relative;
  overflow: hidden;
  background-color: transparent;
}

.gradient-button:after {
  content: '';
  display: block;
  z-index: -1;
  position: absolute;
  top: -2rem; right: 0; bottom: -2rem; left: 0;
  background-image: linear-gradient(red, yellow, green);
  animation: rotate-gradient linear 1s infinite;
}

@keyframes rotate-gradient {
  to { transform: rotate(360deg) }
}

<button id="fill" class="gradient-button">Fill Form</button>