fadeIn сочетание с css непрозрачность анимация

Question

Посмотрите на это fiddle. У меня есть серия div, и некоторые из них могут иметь анимацию непрозрачности css. Если я нажму кнопку fadeIn, эффект выглядит странно в div с анимацией непрозрачности css: они не fadeIn, вместо этого они начинают прямо с заданного значения непрозрачности.

Можно ли сделать каждый divs fadeIn начиная с значения непрозрачности, установленного на ноль?

<div id="container"> 
    <div class="asd red"></div> 
    <div class="asd orange"></div> 
    <div class="asd green"></div> 
    <div class="asd blue"></div> 
    <div class="asd magenta"></div> 
    <div class="asd yellow"></div> 
    <div class="asd red"></div> 
    <div class="asd orange"></div> 
    <div class="asd green"></div> 
    <div class="asd blue"></div> 
    <div class="asd magenta"></div> 
    <div class="asd yellow"></div> 
    <div class="asd red"></div> 
    <div class="asd orange"></div> 
    <div class="asd green"></div> 
    <div class="asd blue"></div> 
    <div class="asd magenta"></div> 
    <div class="asd yellow"></div> 
</div> 
<div> 
    <input type="button" id="fade" value="fade" /> 
</div> 

Css код:

body { 
    background:#404040; 
} 

.asd { 
    float:left; 
    display:block; 
    width:50px; 
    height:50px; 
} 

.red { 
    background-color: red; 
} 
.orange { 
    background-color: orange; 
} 
.green { 
    background-color: green; 
    animation:opacityChange 2s infinite; 
    -webkit-animation:opacityChange 2s infinite; /* Safari and Chrome */ 
} 
.blue { 
    background-color: blue; 
} 
.magenta { 
    background-color: magenta; 
} 
.yellow { 
    background-color: yellow; 
} 

@keyframes opacityChange { 
    0%  {opacity:1;} 
    50%  {opacity:0.5;} 
    100% {opacity:1;} 
} 

@-webkit-keyframes opacityChange { /* Safari and Chrome */ 
    0%  {opacity:1;} 
    50%  {opacity:0.5;} 
    100% {opacity:1;} 
} 

JQuery код:

$("#fade").click(function() { 
    $(".asd").hide(); 
    $(".asd").fadeIn(1000); 
}); 

Answer 1

Вы можете сделать это

http://jsfiddle.net/4HvZk/2/

$("#fade").click(function() { 
    $(".asd").hide().removeClass('ani').fadeIn(1000, function() { 
     $('.green').addClass('ani'); 
    }); 
}); 

CSS

.green { 
    background-color: green; 
} 
.ani { 
    background-color: green; 
    animation:opacityChange 2s infinite; 
    -webkit-animation:opacityChange 2s infinite; /* Safari and Chrome */ 
} 

Отделить анимации C от цвета фона, так что вы можете контролировать его лучше