通过 Javascript 更改 CSS 个关键帧

Question

我想知道是否可以调整 CSS 关键帧的内容，因为我在网上看到了各种建议，但其中 none 似乎对我有用。

这些是我拥有的关键帧：

@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 的动画关键帧可以使用 jQuery.Keyframes

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

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

有关详细信息，请参阅此 link。 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 个关键帧

Changing CSS keyframes through Javascript

javascript

css

jquery

stylesheet

web