Animate.css(一款有意思的CSS3動畫庫)

時間 2019-11-08

標籤 animate.css animate css 一款有意思 css3 動畫欄目 CSS 简体版

原文原文鏈接

官網：https://daneden.github.io/animate.css/css

animate.css 是一款跨瀏覽器的動畫庫。git

使用方式：github

在頁面的 <head>中引入樣式文件：web

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

例子：動畫

<h1 class="animated infinite bounce">Example</h1>

當你將 animate.css 與 jQuery 一塊兒使用或者添加你本身的 CSS 規則時，你能夠用 animate.css 作一大堆其餘的事，使用 jQuery 動態添加動畫：spa

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

你也能夠檢測一個動畫是否結束了：code

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

注意： jQuery.one() 用在你但願只執行事件一次的時候。blog

你能夠改變更畫的持續時間，添加延遲或改變它執行的次數：token

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

注意：確保用供應商的前綴（webkit, moz, 等等）來替換上面CSS中的 vendor

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。