vue+ webpack中的animate.css實現的執行多個連續的動畫

1.安裝

npm install animate.css

 

2.使用方法

入口文件App中進行引入 import animate from 'animate.css'

3.多個連續的動畫

 

實現的效果：實現了三個藍色方塊依次以不同效果展現出來。

模板中代碼：

　　<template>
　　　　<div class="hello">
　　　　　　<div class="box rotateIn" style="animation-duration:2s;animation-delay:1s;animation-iteration-count:1;animation-fill-mode:both;"></div>
　　　　　　<div class="box fadeInLeft" style="opacity:0;animation-duration:3s;animation-delay:2s;animation-iteration-count:1;animation-fill-mode:both;">                  </div>
　　　　　　<div class="box fadeInUp" style="opacity:0;animation-duration:3s;animation-delay:3s;animation-iteration-count:1;animation-fill-mode:both;">                  </div>
           </div>
　　</template>

樣式表：

<style scoped>
　　.box{width:100px;height:80px;background: blue;margin:5px;}
</style>

animate.css代碼解析：

animation-duration---動畫持續時間

animation-delay---動畫延遲時間，多個元素，延遲時間要依次累加

animation-iteration-count---動畫執行次數

animation-fill-mode:both---設置對象狀態為動畫結束或開始的狀態

 

ps:還可以寫成樣式.xxx{animation-duration:2s;animation-delay:4s;animation-fill-mode:both;}

別忘了添加前綴~~