通过Javascript更改CSS关键帧

我想知道是否有可能调整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传递的值更改颜色。这有可能吗

---

谢谢

使用jQuery设置关键帧动画是可以使用jQuery的。关键帧

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

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

有关更多信息，请参阅此链接。

---

完全在Javascript中，这可能会更好，因为元素上只有一个一致的CSS属性，即transition属性：

transition:color 0.5s ease out

然后在javascript中，您可以在不同颜色之间设置一个

setInterval

：

// Note that this is psuedocode and will need to be refactored slightly to better fit your own code

// variables storing color values
var colorA = 'red', 
    colorB = 'blue';

//store element you are changing in a variable
const ELEMENT = document.querySelector('element'); 

function changeColors() {

    // store current color value of ELEMENT in a variable called currentColor
    let currentColor = ELEMENT.style.color; 

    // if color is currently A, switch to B
    if (currentColor == colorA) { 
        ELEMENT.style.color = colorB;
    }
    // else, switch to A
    else { 
        ELEMENT.style.color = colorA;
    }

}

// call set interval to alternate colors with same timing value as set in transition attribute in CSS
setInterval(changeColors, 500); 

---

这只是用javascript实现的一种方法，但这里的主要收获是，在一天结束时，使用javascript而不是CSS动画可能更可行。

你能添加你想要做的html吗？我很想这样做，但不幸的是我不能，因为我需要严格遵守CSS动画，因为这是必需的：（但我确实明白你的意思。谢谢。我看到了你发给我的链接。我按照说明进行了操作，但它对我不起作用，因为它无法识别我正在编写的任何关键帧函数。我得到$.keyframe.Isupported不是一个函数。