CSS3 Animate 下載

CSS3 Animate 是一種基于 CSS3 實現的動畫效果庫，可以簡單地創建各種動畫效果，包括簡單的滑動、漸變、旋轉等等，還能通過 JavaScript 編寫復雜的交互動畫。

使用方法

1. 下載 CSS3 Animate 并引入到 HTML 中
<link rel="stylesheet" href="css/animate.css">
2. 在 HTML 中需要添加動畫效果的元素中添加 class="animate" + 動畫名稱
<div class="animate fadeIn"></div>
3. 可以添加以下類名來指定不同的動畫效果
bounce、flash、pulse、rubberBand、shake、swing、tada、wobble、jello、bounceIn、bounceInDown、bounceInLeft、bounceInRight、bounceInUp、bounceOut、bounceOutDown、bounceOutLeft、bounceOutRight、bounceOutUp、fadeIn、fadeInDown、fadeInDownBig、fadeInLeft、fadeInLeftBig、fadeInRight、fadeInRightBig、fadeInUp、fadeInUpBig、fadeOut、fadeOutDown、fadeOutDownBig、fadeOutLeft、fadeOutLeftBig、fadeOutRight、fadeOutRightBig、fadeOutUp、fadeOutUpBig、flip、flipInX、flipInY、flipOutX、flipOutY、lightSpeedIn、lightSpeedOut、rotateIn、rotateInDownLeft、rotateInDownRight、rotateInUpLeft、rotateInUpRight、rotateOut、rotateOutDownLeft、rotateOutDownRight、rotateOutUpLeft、rotateOutUpRight、slideInUp、slideInDown、slideInLeft、slideInRight、slideOutUp、slideOutDown、slideOutLeft、slideOutRight、zoomIn、zoomInDown、zoomInLeft、zoomInRight、zoomInUp、zoomOut、zoomOutDown、zoomOutLeft、zoomOutRight、zoomOutUp、hinge、rollIn、rollOut

案例

<button class="animate pulse">按鈕</button>
<img src="img/logo.png" alt="logo" class="animate rotateIn">
<div class="animate slideInRight">這是一段文字</div>