animate.css下載與使用方法

發布時間:2019-06-24 22:22:00 來源:github 作者:青鋒建網站
  animate.css動畫是一堆很酷、有趣和跨瀏覽器的動畫,供您在項目中使用。很好的強調,主頁,滑塊,和一般只是加水印效果。在網站設計中,經常用來增加交互效果和增加頁面吸引力,以下是青鋒建站給大家分享的animate.css動畫的引入、使用、如何使用js操作animate.css動畫增強可操作性。

animate.css動畫引入

  animate.css下載網址:https://github.com/daneden/animate.css
  要在網站中使用動畫.css,只需將樣式表放到文檔的<head>中,并將動畫類與任何動畫名稱一起添加到元素中。就這樣!你有一個CSS動畫元素。超棒!
<head>
  <link rel="stylesheet" href="animate.min.css">
</head>
  也可以使用CDN來引入
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>

animate.css動畫使用

若要動畫元素,請將動畫類添加到元素中。您可以包含無限循環的類。
<h1 class="animated infinite bounce delay-2s">Example</h1>
可以更改動畫的持續時間、添加延遲或更改播放的次數:
.yourElement {
  animation-duration: 3s;
  animation-delay: 2s;
  animation-iteration-count: infinite;
}

animate.css支持的動畫類型


animate.css支持的動畫類型
Class Name      
bounce flash pulse rubberBand
shake headShake 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 jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp
heartBeat      

使用js配合使用animate.css動畫

  在此之前為大家發布一個好消息:為此青鋒建站專業開發了JS調用animate.css動畫庫的萬能調用代碼,使用非常方便,不需要JS開發能力也可以方便使用,但是只適用于鼠標滑過時,內部執行動畫,大家可以去免費下載。
1、當你將動畫和Javascript結合起來的時候,你可以用動畫做很多其他的事情。一個簡單的例子:
const element =  document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')
2、還可以檢測animate.css動畫何時結束:
const element =  document.querySelector('.my-element')
element.classList.add('animated', 'bounceOutLeft')
element.addEventListener('animationend', function() { doSomething() })
3、您可以使用這個簡單的JS函數來添加和刪除animate.css動畫:
function animateCSS(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)
    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)
        if (typeof callback === 'function') callback()
    }
    node.addEventListener('animationend', handleAnimationEnd)
}
  以上就是青鋒建站給大家分享的animate.css動畫引入與使用方法,青鋒建站為大家開發了萬能調用CSS3動畫的JS代碼,可去去相關頁面下載。青鋒建站,提供專業的高品質網站制作服務,包括網站建設,SEO,網絡營銷,PHP開發,網站建設知名品牌,全國接單,為企業構建強有力的營銷平臺。

 

分享到:

Copyright © 2016-2026 青鋒建站 版權所有

超级狮子电子游艺 百乐门玩法规则 开外卖店赚钱吗 美团 燕赵凤采20选5走势图 新快3老快3 广西快乐10分钟开奖结果 黄金棋牌下载棋牌 七码倍投公式 时时彩开奖视频游戏 网上棋牌玩法 棋牌下载送28元 河南22选5大星走势图 贝店开店了能赚钱吗 用手机看视频赚钱的软件有哪些 街拍论坛投稿赚钱 山西快乐10分开奖走势 澳洲幸运5助手