连续动画元素的背景

Question

是否可以在循环中为元素的背景颜色设置动画？

例如：如果我们有一个<div>具有background-color:red并通过jQuery我将其更改为background-color:blue。现在我希望它在红色和蓝色之间toggle 连续。

我该怎么做？

Answer 1

@keyframes epilepsy {
    from {
        background: red;
        color:blue;
    }
    to {
        background: blue;
        color:red;
    }
}

.element {
    animation-duration: 0.1s;
    animation-name: epilepsy;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

Working Demo

注意：我没有添加供应商前缀

更新

我有点热心，并使用jQuery和modernizr包含后备。请注意，默认情况下，jQuery animate中不支持background-color转换; jQuery color plugin是必需的

$(document).ready(function() {  
  // Using Modernizr to test if CSS transition is supported or not
  if(!Modernizr.csstransitions){
    setInterval(function() {
      // Go really crazy and do the amazing voodoo using JavaScript
      $('.default').animate({
        backgroundColor: 'red',
        color: 'blue'
      }, 100).animate({
        backgroundColor: 'blue',
        color: 'red'
      }, 100); 
    }, 100);
 });

});

Answer 2

CSS

.divClassRed{
    background-color:red;
}
.divClassBlue{
    background-color:blue;
}

的jQuery

setInterval(function(){
    if($('#myDiv').hasClass('divClassRed')){
        $('#myDiv').addClass('divClassBlue').removeClass('divClassRed');            
    }else{
        $('#myDiv').addClass('divClassRed').removeClass('divClassBlue');
    }

},1000);

DEMO

Answer 3

试试这个

var x;

     function changecolors() {
         x = 1;
         setInterval(change, 1000);
     }

     function change() {
         if(x == 1) {
             color = "red";
             x = 2;
         } else {
             color = "blue";
             x = 1;
         }

         document.body.style.background = color;
     }

Answer 4

查看这个JS小提琴http://jsfiddle.net/uU4gu/

setInterval(function () {
    $('div').css("background-color", "yellow");
    setTimeout(function () {
        $('div').css("background-color", "red");
    }, 1000);   
}, 2000);

Answer 5

看看这个小提琴.. http://jsfiddle.net/SidJadeja/XqwDC/

只需调用递归函数即可连续动画红色和蓝色之间的切换。您可以根据需要修改持续时间。

JS：

function anim() {
    $("body").animate({
        backgroundColor: "darkblue"
    }, {
        duration: 5000,
        complete: function () {
            $("body").animate({
                 backgroundColor: "darkred"
            }, {
                duration: 5000,
                complete: function () {
                    anim();
                }
            });
        }
    });
}