连续动画元素的背景

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;
}

工作演示

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

更新

我有点热心,并使用jQuery和modernizr包括后备.请注意,默认情况下,jQuery animate中不支持background-color转换; jQuery的颜色插件需要

$(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