css3 animate怎么制作好看的動畫效果

這篇文章主要講解了“css3 animate怎么制作好看的動畫效果”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“css3 animate怎么制作好看的動畫效果”吧！

Animate.css是一個超強的CSS3動畫庫，它使用簡單，只需要將相關效果對應的class加入頁面元素中，就能實現翻轉、滑動、旋轉等等復雜超炫的跨瀏覽器的動畫效果，它讓開發這制作頁面動畫變得非常簡單。
首先給大家展示效果圖：

效果演示 源碼下載

如何使用
首先引入animate css文件。

代碼如下:

<link rel="stylesheet" href="animate.min.css">

然后給指定的元素加上指定的動畫class樣式名。

代碼如下:

<div class="animated bounceOutLeft"></div>

這里包括兩個class名，第一個是基本的，也是必須添加的樣式名，任何想實現的元素都得添加這個樣式。第二個是指定的動畫樣式名，也就是想要什么動畫效果，指定對應的動畫樣式名稱就可以。如果想讓動畫循環則可以加入樣式：infinite 。
Animate.css提供了以下多種動畫效果可以直接作為class樣式添加使用，就像文章：jQuery Easing 動畫效果擴展提到的easing動畫一樣。
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 ，flipInX ，flipInY ，flipOutX ，flipOutY ，lightSpeedIn ，lightSpeedOut ，rotateIn ，rotateInDownLeft ，rotateInDownRight ，rotateInUpLeft ，rotateInUpRight ，rotateOut ，rotateOutDownLeft ，rotateOutDownRight ，rotateOutUpLeft ，rotateOutUpRight ，hinge ，rollIn ，rollOut ，zoomIn ，zoomInDown ，zoomInLeft ，zoomInRight ，zoomInUp ，zoomOut ，zoomOutDown ，zoomOutLeft ，zoomOutRight ，zoomOutUp ，slideInDown ，slideInLeft ，slideInRight ，slideInUp ，slideOutDown ，slideOutLeft ，slideOutRight ，slideOutUp
如果說想給某個元素動態添加動畫樣式，可以結合jquery來實現：

代碼如下:

$('#yourElement').addClass('animated bounceOutLeft');

當動畫效果執行完成后還可以通過以下代碼添加事件：

代碼如下:

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

感謝各位的閱讀，以上就是“css3 animate怎么制作好看的動畫效果”的內容了，經過本文的學習后，相信大家對css3 animate怎么制作好看的動畫效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！