This content is over 10 years old. It may be obsolete and may not reflect the current opinion of the author.

Animate.css 是一組好玩的 CSS animation keyframe，提供很多誇張的 DOM 動畫效果。使用方法根據網頁是用 Script 在想要做動畫的元素上面加上 class，然後就會觸發 CSS transition。以 jQuery 為例：

$('.bouncy').addClass('bounceInDown');

但這個作法有個問題，在他的範例頁面上也是，就是在動畫結束之後沒有辦法再跑一次（因為要先拿掉 Class 再加才會有 transition）。所以最基本的，應該要在動畫跑完（預設是 1 秒鐘）之後把 class 偷偷拿掉。我還有其他的需求像是 *Out 的 transition 跑完之後就把元素藏起來、callback、如果不支援的瀏覽器就跑 jQuery 動畫這樣，最後就變成這樣一個小小的 helper plug-in 了。

jQuery.fn.animateCSS = function (className, callback) {
	var that = this;
	if (!Modernizr.csstransforms || !Modernizr.csstransitions) {
		// for old browsers we use jQuery animation
		// only fadeIn and fadeOut for now
		if (/In/.test(className)) this.fadeIn(1000);
		if (/Out/.test(className)) this.fadeOut(1000);
	}
	if (/In/.test(className)) this.show();
	setTimeout(
		function () {
			that.removeClass(className);
			if (/Out/.test(className)) that.hide();
			if (typeof callback === 'function') callback.apply(that, that);
		},
		950
	);
	return this.addClass('animated ' + className);
}

有需要請隨意複製貼上到自己的專案去囉。