通过 Javascript 更改 CSS 关键帧 [英] Changing CSS keyframes through Javascript

问题描述

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

I would like to know whether it is possible to adjust the contents of CSS keyframes, as I have seen a variety of suggestions online but none of them seem to work for me.

这些是我拥有的关键帧:

These are the keyframes I have:

@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传递的值来更改颜色.这有可能吗?

I would like to be able to adjust the color attribute for each one of the above keyframes through Javascript, so that the colours can be changed according to the value passed through Javascript. Is this possible in any way?

谢谢

推荐答案

使用 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

For more info please see this link. https://github.com/Keyframes/jQuery.Keyframes

这篇关于通过 Javascript 更改 CSS 关键帧的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！