//將鼠標(biāo)懸停在一個(gè) div 元素上，逐步改變表格的寬度從 100px 到 300px：
div
{
 width:100px;
 transition: width 2s;
 -webkit-transition: width 2s; /* Safari */
}
div:hover {width:300px;}

//transition 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置四個(gè)過渡屬性：

//指定CSS屬性的name，transition效果
transition-property
//transition效果需要指定多少秒或毫秒才能完成
transition-duration
//指定transition效果的轉(zhuǎn)速曲線
transition-timing-function
//定義transition效果開始的時(shí)候
transition-delay

//使用簡(jiǎn)寫屬性，將動(dòng)畫與 div 元素綁定
div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
//animation 屬性是一個(gè)簡(jiǎn)寫屬性，用于設(shè)置六個(gè)動(dòng)畫屬性：
//規(guī)定需要綁定到選擇器的 keyframe 名稱。。
animation-name
//規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)。
animation-duration
//規(guī)定動(dòng)畫的速度曲線。
animation-timing-function
//規(guī)定在動(dòng)畫開始之前的延遲。
animation-delay
//規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)。
animation-iteration-count
//規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫。
animation-direction

@keyframes animationname {
 keyframes-selector {
  css-styles;
 }
}
//必需。定義動(dòng)畫的名稱。
animationname
//必需。動(dòng)畫時(shí)長(zhǎng)的百分比。
//合法的值：
//0-100%
//from（與 0% 相同）
//to（與 100% 相同）
keyframes-selector
//必需。一個(gè)或多個(gè)合法的 CSS 樣式屬性。
css-styles

npm install animate.css –save

import animate from 'animate.css'
Vue.use(animate); 

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

/*v是默認(rèn)的，在transition中定義name屬性
 <transition name=fade>
 v-enter-from就要改成fade-enter-from
*/
<transition>
 <div>hello world</div>
 </transition>
 //使用transition標(biāo)簽時(shí)，直接在css中控制
 /*元素進(jìn)入前效果*/
 .v-enter-from{
 opacity: 0;
 }
 /*元素進(jìn)入時(shí)效果*/
 .v-enter-active{
 /*使用定義的動(dòng)畫*/
  animation: shake 0.3s;
 }
/*元素進(jìn)入后效果*/
.v-enter-to{
  opacity: 1;
 }
/*元素離開前效果*/
 .v-leave-from{
  opacity: 1;
 }
/*元素離開時(shí)效果*/
 .v-leave-active{
/*使用定義的動(dòng)畫*/
  animation: shake 0.3s;
 }
 /*元素離開后效果*/
 .v-leave-to{
  opacity: 0;
 }
 /*定義一個(gè)動(dòng)畫效果*/
 @keyframes shake {
  0%{
   transform: translateX(-100px);
 }
  50%{
  transform: translateX(-50px);
 }
 0%{
   transform: translateX(50px);
 }
 }

<transition
 transition :duration="{enter:1500,leave:600}"
 enter-from-class="animated"
 enter-active-class="animated"
 enter-to-class="animated"
 leave-from-class="animated fadeOut"
 leave-active-class="animated fadeOut"
 leave-to-class="animated fadeOut"
 v-on:before-enter="beforeEnter"
　　v-on:enter="enter"
　　v-on:after-enter="afterEnter"
　　v-on:enter-cancelled="enterCancelled"
　　v-on:before-leave="beforeLeave"
　　v-on:leave="leave"
　　v-on:after-leave="afterLeave"
　　v-on:leave-cancelled="leaveCancelled"
 mode="out-in" appear
>
/*enter-from-class就是v-enter-from元素進(jìn)入前
 animated就是使用animation動(dòng)畫庫，fadeOut就是動(dòng)畫效果
 */
 /*before-enter這些就是鉤子函數(shù)，是滑動(dòng)進(jìn)入狀態(tài)
 mode="out-in"是設(shè)定動(dòng)畫是先入后出，還是先出后入
 appear 是設(shè)置加載時(shí)就要開始動(dòng)畫
 */
// 進(jìn)入中
//動(dòng)畫進(jìn)入前
// --------
beforeEnter: function (el) {
 //el就是dom元素
 // ...
},
// 此回調(diào)函數(shù)是可選項(xiàng)的設(shè)置
// 與 CSS 結(jié)合時(shí)使用
//動(dòng)畫進(jìn)入時(shí)
enter: function (el, done) {
 // ...
 done()
},
//動(dòng)畫進(jìn)入后
afterEnter: function (el) {
 // ...
},
//動(dòng)畫進(jìn)入完成
enterCancelled: function (el) {
 // ...
},
// --------
// 離開時(shí)
// --------
beforeLeave: function (el) {
 // ...
},
// 此回調(diào)函數(shù)是可選項(xiàng)的設(shè)置
// 與 CSS 結(jié)合時(shí)使用
leave: function (el, done) {
 // ...
 done()
},
afterLeave: function (el) {
 // ...
},
// leaveCancelled 只用于 v-show 中
leaveCancelled: function (el) {
 // ...
}

fade: {
 title: '淡入淡出',
 fadeIn: '淡入',
 fadeInDown: '向下淡入',
 fadeInDownBig: '向下快速淡入',
 fadeInLeft: '向右淡入',
 fadeInLeftBig: '向右快速淡入',
 fadeInRight: '向左淡入',
 fadeInRightBig: '向左快速淡入',
 fadeInUp: '向上淡入',
 fadeInUpBig: '向上快速淡入',
 fadeOut: '淡出',
 fadeOutDown: '向下淡出',
 fadeOutDownBig: '向下快速淡出',
 fadeOutLeft: '向左淡出',
 fadeOutLeftBig: '向左快速淡出',
 adeOutRight: '向右淡出',
 fadeOutRightBig: '向右快速淡出',
 fadeOutUp: '向上淡出',
 fadeOutUpBig: '向上快速淡出'
},
bounce: {
 title: '彈跳類',
 bounceIn: '彈跳進(jìn)入',
 bounceInDown: '向下彈跳進(jìn)入',
 bounceInLeft: '向右彈跳進(jìn)入',
 bounceInRight: '向左彈跳進(jìn)入',
 bounceInUp: '向上彈跳進(jìn)入',
 bounceOut: '彈跳退出',
 bounceOutDown: '向下彈跳退出',
 bounceOutLeft: '向左彈跳退出',
 bounceOutRight: '向右彈跳退出',
 bounceOutUp: '向上彈跳退出'
},
zoom: {
 title: '縮放類',
 zoomIn: '放大進(jìn)入',
 zoomInDown: '向下放大進(jìn)入',
 zoomInLeft: '向右放大進(jìn)入',
 zoomInRight: '向左放大進(jìn)入',
 zoomInUp: '向上放大進(jìn)入',
 zoomOut: '縮小退出',
 zoomOutDown: '向下縮小退出',
 zoomOutLeft: '向左縮小退出',
 zoomOutRight: '向右縮小退出',
 zoomOutUp: '向上縮小退出'
},
rotate: {
 title: '旋轉(zhuǎn)類',
 rotateIn: '順時(shí)針旋轉(zhuǎn)進(jìn)入',
 rotateInDownLeft: '從左往下旋入',
 rotateInDownRight: '從右往下旋入',
 rotateInUpLeft: '從左往上旋入',
 rotateInUpRight: '從右往上旋入',
 rotateOut: '順時(shí)針旋轉(zhuǎn)退出',
 rotateOutDownLeft: '向左下旋出',
 rotateOutDownRight: '向右下旋出',
 rotateOutUpLeft: '向左上旋出',
 rotateOutUpRight: '向右上旋出'
},
flip: {
 title: '翻轉(zhuǎn)類',
 flipInX: '水平翻轉(zhuǎn)進(jìn)入',
 flipInY: '垂直翻轉(zhuǎn)進(jìn)入',
 flipOutX: '水平翻轉(zhuǎn)退出',
 flipOutY: '垂直翻轉(zhuǎn)退出'
},
strong: {
 title: '強(qiáng)調(diào)類',
 bounce: '彈跳',
 flash: '閃爍',
 pulse: '脈沖',
 rubberBand: '橡皮筋',
 shake: '左右弱晃動(dòng)',
 swing: '上下擺動(dòng)',
 tada: '縮放擺動(dòng)',
 wobble: '左右強(qiáng)晃動(dòng)',
 jello: '拉伸抖動(dòng)'
}