javascript - 通过 Javascript 更改 CSS 关键帧

Question

我想知道是否可以调整CSS关键帧的内容，因为我在网上看到了各种建议，但似乎都不适合我。

这些是我的关键帧:

@keyframes changeColor {
  0% {
    color: yellow;
  }
  50% {
    color: red;
  }
}

@-moz-keyframes changeColor {
  0% {
    color: yellow;
  }
  50% {
    color: red;
  }
}

@-webkit-keyframes changeColor {
  0% {
    color: yellow;
  }
  50% {
    color: red;
  }
}


@-o-keyframes changeColor {
  0%{
    color: yellow;
  }
  50% {
    color: red;
  }
}

我希望能够通过 Javascript 调整上述每个关键帧的颜色属性，以便颜色可以根据通过 Javascript 传递的值进行更改。这有可能吗？

谢谢

Answer 1

可以使用 jQuery.Keyframes 使用 jQuery 动画关键帧

var supportedFlag = $.keyframe.isSupported();
$.keyframe.define([{
    name: 'roll-clockwise',
    '0%': {
        'color' : 'green'
    },
    '100%': {
        'color' : 'yellow'
    }
    }
]);

$("p").playKeyframe({
    name: 'changeColor',
    duration: 2000
});

有关更多信息，请参阅此链接。 https://github.com/Keyframes/jQuery.Keyframes