通过 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 动画 KeyFrame 可以使用 jQuery.Keyframes

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

Answer 2

这可能完全在 Javascript 中工作得更好，唯一一致的 CSS 属性应该始终位于元素上的转换属性：例如 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 动画更可行。