jqueryの fadeIn / fadeOut メソッドを CSS3(animation)アニメーションにするには以下のようにします。
デモ : http://logic.moo.jp/livedemo/jquery.fadecss3/demo.html
<link rel="stylesheet" href="jquery.fadecss3.css">
<script type="text/javascript" src="jquery.fadecss3.js"></script>
$('#item').fadeInCss3();
$('#item').fadeOutCss3();
$('#item').fadeInCss3(1000, 'ease-in');
$('#item').fadeOutCss3(3500, 'ease-in-out');
@keyframes fadein_css3_kf {
0% {opacity: 0;}
100% {opacity: 1;}
}
@-webkit-keyframes fadein_css3_kf{
0% {opacity:0;}
100% {opacity:1;}
}
@keyframes fadeout_css3_kf {
0% {opacity: 1;}
100% {opacity: 0; visibility: hidden; }
}
@-webkit-keyframes fadeout_css3_kf{
0% {opacity:1;}
100% {opacity:0; visibility: hidden;}
$.fn.fadeInCss3 = function(duration, easing) {
var event_alias = "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd";
if (! duration){duration=400;}
if (! easing){easing='linear';}
var _this = this;
setTimeout(function() {
return $(_this).show().css({
'animation' : 'fadein_css3_kf 400ms linear 0s 1 normal' ,
'animation-duration' : duration + 'ms' ,
'animation-timing-function' : easing ,
'animation-fill-mode' : 'forwards' ,
'visibility' : 'visible'
}).on(event_alias, function(){
$(this).off(event_alias);
$(this).css({
'visibility' : 'visible' ,
'animation' : 'none'
});
});
}, 0);
};
$.fn.fadeOutCss3 = function(duration, easing) {
var event_alias = "animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd";
if (! duration){duration=400;}
if (! easing){easing='linear';}
$(this).each(function(){
if( $(this).filter(':not(:hidden)').length ){
$(this).show().css({
'animation' : 'fadeout_css3_kf 400ms linear 0s 1 normal' ,
'animation-duration' : duration + 'ms' ,
'animation-timing-function' : easing ,
'animation-fill-mode' : 'forwards' ,
'visibility' : 'visible'
}).on(event_alias, function(){
$(this).off(event_alias);
$(this).css({
'visibility' : 'hidden' ,
'animation' : 'none' ,
'display' : 'none'
});
});
}
});
return $(this);
};
ただ現時点では CSSアニメーションはjQuery本体のanimate()よりは早いものの、Velocity.js には劣るようです。 参考 : http://bit.ly/1QnSfRn
https://github.com/rstacruz/jquery.transit#readme
jQueryを使いますが、アニメーション自体はCSS3アニメーションなのでスマホでも軽いです。 例:(フェードインの例)
<div id="test" style="border:1px solid red;">テストです</div>
$('#test').transition({ opacity: 0.0, scale: 0.5 }, 0);
$('#test').transition({
opacity : 1.0,
scale : 1.0 ,
duration: 5000,
complete: function() {
alert("CSS3 animation complete!");
}
});