CSS / 前端技術 / 筆記 · 2020-12-15

CSS Animate.css套件

安裝

https://daneden.github.io/animate.css/

npm 安裝
$ npm install animate.css --save

載入 CDN
https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css

使用

Html設定

class=”動畫 動畫類別 播放方式” 例 : class=”animated bounce infinite”

類別設定
animated 啟用動畫
infinite 無限循環

效果類別
bounce: 彈跳

<!--html範例-使用-->

<head>
  <link  rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
</head>

<h1 class="animate__animated animate__bounce">An animated element</h1>

CSS 設定 @keyframes

/*css範例-使用 @keyframes 設定*/

.my-element {
  display: inline-block;
  margin: 0 0.5rem;
  //相關設定
  animation: bounce; //動畫效果名稱
  animation-duration: 2s; //動畫持續時間
}
/*css範例-自定義變數 CSS Variables*/

.animate__animated.animate__bounce {
  --animate-duration: 2s;
}

:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

JavaScript 設定

// class加入動畫效果
const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');

element.addEventListener('animationend', () => {
  // 檢測動畫播放時間
});
// 動畫X2倍時間播放 2s
document.documentElement.style.setProperty('--animate-duration', '2s');

// 動畫以1/2時間播放 0.5s
const element = document.querySelector('.my-element');
element.style.setProperty('--animate-duration', '0.5s');
or
// 動畫以1/2時間播放 0.5s(簡化)
document.documentElement.style.setProperty('--animate-duration', '.5s');
// 使添加動畫類並自動將其刪除
const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it 我們創建一個Promise並返回
  return new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise當動畫結束時，我們清理類並解決Promise
    function handleAnimationEnd() {
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });

範例

延遲

<!--html範例-延遲設定 Delay classes->

<div class="animate__animated animate__bounce animate__delay-2s">Example</div>

<!--html範例-延遲設定 Delay classes 標籤設定-->

animate__delay-2s	2s
animate__delay-3s	3s
animate__delay-4s	4s
animate__delay-5s	5s
/*css範例-延遲設定 Delay classes */

/*動畫X2倍時間播放 2s*/
:root {
  --animate-delay: 2s;
}
/*動畫1/2倍時間播放 0.5s*/
:root {
  --animate-delay: 0.5s;
}

快慢

<!--html範例-Slow, slower, fast, and Faster classes-->

<div class="animate__animated animate__bounce animate__faster">Example</div>

<!--html範例-Slow, slower, fast, and Faster classes 標籤設定-->

animate__slow       2s
animate__slower   3s
animate__fast         800ms
animate__faster     500ms
/*css範例-延遲設定 Slow, slower, fast, and Faster classes*/

:root {
  --animate-duration: 2s;
}

.my-element {
  --animate-duration: 0.5s; 
}

重複播放

<!--html範例-重複播放Repeating classess-->

<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

<!--html範例-重複播放Repeating classess標籤設定-->

animate__repeat-1	1
animate__repeat-2	2
animate__repeat-3	3
animate__infinite	infinite
/*css範例-重複播放Repeating classess*/

.my-element {
  --animate-repeat: 2; /*播放次數*/
}

JavaScript 範例

<!--html範例-點選看效果-->

<div class="btnGroup">
  <button class="btn jq-animation">點擊我看動畫</button>
  <p class="text text3">透過 JS 套用效果</p>
</div>
//javasciipt範例-點選看效果
$(function () {
  $(".jq-animation").click(function () {
    $(".text3").addClass("animate__animated animate__backInLeft");
  });
  $(".text3").on("animationend", function () {
    // 監聽當動畫結束後移除 class
    $(this).removeClass("animate__animated animate__backInLeft");
  });
});

效果類別

Attention seekers

bounce
flash
pulse
rubberBand
shakeX
shakeY
headShake
swing
tada
wobble
jello
heartBeat


Back entrances

backInDown
backInLeft
backInRight
backInUp


Back exits

backOutDown
backOutLeft
backOutRight
backOutUp


Bouncing entrances

bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp


Bouncing exits

bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp


Fading entrances

fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeInTopLeft
fadeInTopRight
fadeInBottomLeft
fadeInBottomRight


Fading exits

fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
fadeOutTopLeft
fadeOutTopRight
fadeOutBottomRight
fadeOutBottomLeft


Flippers

flip
flipInX
flipInY
flipOutX
flipOutY


Lightspeed

lightSpeedInRight
lightSpeedInLeft
lightSpeedOutRight
lightSpeedOutLeft


Rotating entrances

rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight


Rotating exits

rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight


Specials

hinge
jackInTheBox
rollIn
rollOut


Zooming entrances

zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp


Zooming exits

zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp


Sliding entrances

slideInDown
slideInLeft
slideInRight
slideInUp


Sliding exits

slideOutDown
slideOutLeft
slideOutRight
slideOutUp

Share

You may also like...