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動畫

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 青鋒建站 版權所有

超级狮子电子游艺