CSS3アニメーションとjQueryのfadeOut/fadeInを組み合わせると危険

今日ちょっとハマったので覚え書き。

CSS3でアニメーションをしている箇所を、同時に別のボタンでフェイドイン/フェイドアウトさせたかったので、いつもみたいに

$('#hoge').toggle(
    function(){
       $('#wrap').fadeOut('slow');
    },
    function(){
        $('#wrap').fadeIn('slow');
    }
);

って書いてたら、フェイドインしたときにCSS3で設定したアニメーションが無駄に動き始めた。
ただフェイドインして欲しかっただけなのに。

よくよく考えたらjQueryのfadeOutってcssのdisplayをnoneにしちゃうから、fadeInするときにもう一度cssが適用されなおして、アニメーションが動いちゃうと。

しょうがないので、フェイドイン/フェイドアウトもCSS3で実装。

$('#fuga').toggle(
    function(){
       $('#wrap').removeClass('btnFIn').addClass('btnFOut');
    },
    function(){
        $('#wrap').removeClass('btnFOut').addClass('btnFIn');
    }
);

.btnFOut{
  -webkit-animation-name:'FOut';
  -webkit-animation-duration:.3s;
  -webkit-animation-timing-function:ease-in;
  -webkit-animation-iteration-count:1;
  visibility: hidden;
}
@-webkit-keyframes 'FOut' {
  0%{opacity:1;visibility: visible;}
  100%{opacity:0;visibility: hidden;}
}

.btnFIn{
  -webkit-animation-name:'FIn';
  -webkit-animation-duration:.3s;
  -webkit-animation-timing-function:ease-in;
  -webkit-animation-iteration-count:1;
}
@-webkit-keyframes 'FIn' {
  0%{opacity:0;visibility: hidden;}
  100%{opacity:1;visibility: visible;}
}