This content is over 9 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 為例:


但這個作法有個問題,在他的範例頁面上也是,就是在動畫結束之後沒有辦法再跑一次(因為要先拿掉 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));
		function () {
			if (/Out/.test(className)) that.hide();
			if (typeof callback === 'function') callback.apply(that, that);
	return this.addClass('animated ' + className);


One thought on “Animate.css

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.