Question

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

这些是我的关键帧：

file://

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

谢谢

Answer 1

使用 jQuery.Keyframes

可以使用jQuery动画制作KeyFrame

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动画中完成所有操作可能更加可行。

通过Javascript更改CSS关键帧

2 个答案: