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><!-- 引用animate文件 --><link rel="stylesheet" href="css/animate.min.css"/>
</head>
<body></body>
</html>

添加一個動畫

<!-- animated類似與全局變量，定義動畫持續時間 -->
<!-- bounce具體動畫的名稱 -->
<div class="animated bounce">Animate.css
</div>

定義播放次數

<!-- infinite定義動畫無限播放 -->
<div class="animated bounce infinite">Animate.css
</div>

通過JavaScript或jQuery添加Animate動畫

<div>Animate.css
</div>
<!-- 在線引用jQuery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 通過jQuery添加animate動畫 -->
<script>$('div').addClass('animated bounce');
</script>

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

<div>Animate.css
</div>
<!-- 在線引用jQuery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- 通過JavaScript或jQuery添加animate動畫 -->
<script>$('div').addClass('animated bounce infinite');setTimeout(function(){$("div").removeClass("infinite");},5000)
</script>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/370040.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/370040.shtml
英文地址，請注明出處：http://en.pswp.cn/news/370040.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！