當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Animate.css介绍

發布時間：2023/12/2 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Animate.css介绍小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Animate.css簡介

animate.css 動畫庫，預設了抖動（shake）、閃爍（flash）、彈跳（bounce）、翻轉（flip）、旋轉（rotateIn/rotateOut）、淡入淡出（fadeIn/fadeOut）等多達 60 多種動畫效果，幾乎包含了所有常見的動畫效果。

Animate.css下載

百度云盤下載鏈接

Animate.css動畫演示

演示地址

Animate模板

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/animate.min.css"/> </head> <body></body> </html>

添加一個動畫

<div class="animated bounce">Animate.css </div>

定義播放次數

<div class="animated bounce infinite">Animate.css </div>

通過JavaScript或jQuery添加Animate動畫

<div>Animate.css </div>  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>  <script>$('div').addClass('animated bounce'); </script>

?添加定時器，5秒后刪除animate無限播放效果

<div>Animate.css </div>  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>  <script>$('div').addClass('animated bounce infinite');setTimeout(function(){$("div").removeClass("infinite");},5000) </script>

總結

以上是生活随笔為你收集整理的Animate.css介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

css
Animate