animate.css的使用

菩提樹___發表於2019-02-16
CSS

animate.css的使用
釋出文章
“weixin_38002190”

animate.css的使用

　animate.css是一個使用CSS3的animation製作的動畫效果的CSS集合，裡面預設了很多種常用的動畫，且使用非常簡單。本文將詳細介紹animate.css的使用

引入
　　animate.css的最新版本是3.5.2，引入animate.css很容易，有以下幾種方法

　　1、從官網下載

　　https://raw.github.com/danede…

　　2、通過npm安裝

$ npm install animate.css
　　3、使用線上cdn

https://unpkg.com/animate.css…

效果演示
　　animate.css的使用非常簡單，因為它是把不同的動畫繫結到了不同的類裡，所以想要使用哪種動畫，只需要把通用類animated和相應的類新增到元素上就行了

　　下面來詳細介紹animate.css裡面的類，主要包括Attention(晃動效果)、bounce(彈性緩衝效果)、fade(透明度變化效果)、flip(翻轉效果)、rotate(旋轉效果)、slide(滑動效果)、zoom(變焦效果)、special(特殊效果)這8類

【Attention(晃動效果)】

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello

　以在div上使用bounce為例
　

<div class="animated bounce"></div>

　【bounce(彈性緩衝效果)】
　

bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp

【fade(透明度變化效果)】

fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig

【flip(翻轉效果)】

flip
flipInX
flipInY
flipOutX
flipOutY

【rotate(旋轉效果)】

rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight

【slide(滑動效果)】

slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp

【zoom(變焦效果)】

zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp

【special(特殊效果)】

hinge
rollIn
rollOut
lightSpeedIn
lightSpeedOut

實際應用
　　在一般的使用中，直接在元素上新增animated和對應的類名即可
　　

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
<style>
.box{height: 100px;width: 100px;background-color: lightblue}
</style>
</head>
<body>
<div class="box animated flash"></div>
</body>
</html>

通過給JS新增或刪除class，可以實現動態效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/animate.css@3.5.2/animate.min.css">
<style>
.box{height: 100px;width: 100px;background-color: lightblue}
</style>
</head>
<body>
<button id="btn1">新增</button>
<button id="btn2">移除</button>
<div id="box" class="box"></div>
<script>
var oBtn1 = document.getElementById(`btn1`);
var oBtn2 = document.getElementById(`btn2`);
var oBox = document.getElementById(`box`);
oBtn1.onclick = function(){
  oBox.classList.add(`animated`);
  oBox.classList.add(`flash`);
}
oBtn2.onclick = function(){
  oBox.classList.remove(`flash`);
}
</script>
</body>
</html>

animate.css的使用

animate.css是一個使用CSS3的animation製作的動畫效果的CSS集合，裡面預設了很多種常用的動畫，且使用非常簡單。本文將詳細介紹animate.css的使用

引入
　　animate.css的最新版本是3.5.2，引入animate.css很容易，有以下幾種方法

1、從官網下載

https://raw.github.com/danede…

2、通過npm安裝

$ npm install animate.css
　　3、使用線上cdn

https://unpkg.com/animate.css…

效果演示
　　animate.css的使用非常簡單，因為它是把不同的動畫繫結到了不同的類裡，所以想要使用哪種動畫，只需要把通用類animated和相應的類新增到元素上就行了

下面來詳細介紹animate.css裡面的類，主要包括Attention(晃動效果)、bounce(彈性緩衝效果)、fade(透明度變化效果)、flip(翻轉效果)、rotate(旋轉效果)、slide(滑動效果)、zoom(變焦效果)、special(特殊效果)這8類

【Attention(晃動效果)】

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
以在div上使用bounce為例

<div class=”animated bounce”></div>
【bounce(彈性緩衝效果)】

bounceIn
bounceInDown
bounceInLeft
bounceInRight
bounceInUp
bounceOut
bounceOutDown
bounceOutLeft
bounceOutRight
bounceOutUp
【fade(透明度變化效果)】

fadeIn
fadeInDown
fadeInDownBig
fadeInLeft
fadeInLeftBig
fadeInRight
fadeInRightBig
fadeInUp
fadeInUpBig
fadeOut
fadeOutDown
fadeOutDownBig
fadeOutLeft
fadeOutLeftBig
fadeOutRight
fadeOutRightBig
fadeOutUp
fadeOutUpBig
【flip(翻轉效果)】

flip
flipInX
flipInY
flipOutX
flipOutY
【rotate(旋轉效果)】

rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
【slide(滑動效果)】

slideInDown
slideInLeft
slideInRight
slideInUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
【zoom(變焦效果)】

zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
【special(特殊效果)】

hinge
rollIn
rollOut
lightSpeedIn
lightSpeedOut
實際應用
　　在一般的使用中，直接在元素上新增animated和對應的類名即可

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<link rel=”stylesheet” href=”https://unpkg.com/animate.css…;>
<style>
.box{height: 100px;width: 100px;background-color: lightblue}
</style>
</head>
<body>
<div class=”box animated flash”></div>
</body>
</html>
通過給JS新增或刪除class，可以實現動態效果

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
<link rel=”stylesheet” href=”https://unpkg.com/animate.css…;>
<style>
.box{height: 100px;width: 100px;background-color: lightblue}
</style>
</head>
<body>
<button id=”btn1″>新增</button>
<button id=”btn2″>移除</button>
<div id=”box” class=”box”></div>
<script>
var oBtn1 = document.getElementById(`btn1`);
var oBtn2 = document.getElementById(`btn2`);
var oBox = document.getElementById(`box`);
oBtn1.onclick = function(){
oBox.classList.add(`animated`);
oBox.classList.add(`flash`);
}
oBtn2.onclick = function(){
oBox.classList.remove(`flash`);
}
</script>
</body>
</html>
Markdown 2508 字數 185 行數 當前行 3, 當前列 1 HTML 2450 字數 144 段落

相關文章