這篇文章主要為大家介紹了關於在Swiper內如何製作CSS3動畫效果的相關資料，文中透過範例程式碼介紹的非常詳細，對大家的學習或工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
前言
Swiper 是一款免費以及輕量級的行動裝置觸控滑桿的框架，使用硬體加速過渡（如果該設備支援的話）。主要使用與行動端的網站、網頁應用程式（web apps），以及原生的應用程式（native apps）。主要是為IOS而設計的，同時，在Android、WP8系統以及現代桌面瀏覽器也有著良好的使用者體驗。
本文主要介紹了Swiper內製作CSS3動畫效果的相關內容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧。
1、在需要新增動畫的頁面裡面引入以下幾個檔案版本對應
<script src="../js/swiper.min.js"></script> <script src="../js/swiper.animate.min.js"></script> //**这里引入jquery或者zepto.js都可以**// <script src="../js/jquery-1.9.1.js"></script> <link rel="stylesheet" href="../css/animate.min.css" rel="external nofollow" >
2、接著在頁面js部分添加(按業務需求)
var mySwiper = new Swiper('.swiper-container',{
autoplay : 5000,//自动切换时间
pagination : '.swiper-pagination',
//pagination : '#swiper-pagination1',
onInit: function(swiper) {//轮播初始化时候执行动画
swiperAnimateCache(swiper);
swiperAnimate(swiper);
},
onSlideChangeEnd: function(swiper) {//轮播切换到最后一张的时候重新执行
swiperAnimate(swiper);
}
})3 、在需要執行的動畫的元素上面加上class:
在需要執行動畫的元素上加上class ("ani"、"animated")
然後可以加入animate.css裡面提供的一些動畫
如果animate.css裡面的動畫不能滿足需求也可以自訂一些動畫
直接在執行動畫的元素對應的css裡面添加自訂的動畫樣式
也可以在元素上面配置幾個參數
swiper-animate-effect：切換效果，例如fadeInUp
swiper-animate-duration：可選，動畫持續時間（單位秒），例如0.5s
swiper-animate-delay：可選，動畫延遲時間（單位秒），例如0.3s
4、下面是案例
#上面是我整理給大家的，希望今後對大家有幫助。
相關文章：
以上是使用Swiper如何製作CSS3動畫效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
