javascript - javascript中的彩色到灰度循环

Question

我遇到了一个问题，当我的页面加载时，它需要从灰度变为彩色(下面的代码)，但随后我需要它连续切换到灰度和彩色。

HTML:

<img src="images/main.jpg" id="mainimg" />

CSS:

#mainimg{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition : -webkit-filter 3500ms linear;
    -moz-transition : -moz-filter 3500ms linear;
    transition : filter 3500ms linear;
}

JavaScript:

$(window).load(function() {
        $('#mainimg').on('transitionend', function () {
    $(this).css({
        "webkitFilter" : "none",
        "mozFilter" : "none",
        "filter" : "none"
    });
}).css({
    "webkitFilter" : "grayscale(0%)",
    "mozFilter" : "grayscale(0%)",
    "filter" : "grayscale(0%)"
});

});

另一个问题是 IE 和 Opera 没有做过渡，这不是主要问题，因为我现在正在寻找它，但如果有人可以轻松帮助它，我将不胜感激。

(我不习惯 JQuery，但我正在努力学习它，如果你们认为 JQuery 会更好，请发布)提前致谢，抱歉，如果我是“新手”!

Answer 1

如果您要过渡路线，我建议您使用类而不是尝试手动设置值

#mainimg{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition : -webkit-filter 3500ms linear;
    -moz-transition : -moz-filter 3500ms linear;
    transition : filter 3500ms linear;
}

#mainimg.transition {
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    filter: grayscale(0%);
}

然后通过你喜欢的方法设置类

$(window).load(function() {
    $('#mainimg').addClass('transition');
}

如果你想来回过渡，使用关键帧