css3动画-vue中如何使用

在Vue中可以通过过度transition配合animation实现自定义动画效果，但是需要对css3非常熟悉才能实现想要的效果。大家都知道有一个css动画库animate.css里面有丰富的动画效果，简单易用

一、npm安装animate.css

animate官网

npm install animate.css --save 

二、main.js中导入：

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

三、在需要添加过渡的类名绑定动画效果

我是动画显示的内容
 

        

          
我是动画显示的内容
        
 

也可以放在 transition 中使用

详解animation 组成

大致三部分组成
1 关键帧 @keyframes 关键帧(keyframes) - 定义动画在不同阶段的状态。 动画属性(properties) - 决定动画的播放时长，播放次数，以及用何种函数式去播放动画等。（可以类比音视频播放器） css属性 - 就是css元素不同关键帧下的状态。 语法

@keyframes keyframes-name {undefined
[ [ from | to | <百分比> ] [, from | to | <百分比> ]* block ]*
}
keyframes-name
帧列表的名称。 名称必须符合 CSS 语法中对标识符的定义。
from
等效于 0%.
to
等效于 100%.
.test {
 animation: dropdown 8s linear infinite;
}
@keyframes dropdown {
    0% { margin-top: 0px;}
   /** 暂停效果 */
   10% { margin-top: 0px;}
   50% { margin-top: -100px;}
   60% { margin-top: -100px;}
   90% { margin-top: -200px;}
  100% { margin-top: -200px;}
}

创建了一个@keyframes命名为dropdown。
关键帧主要分为3个阶段，0%、50%、100%。 动画播放时长为6s、循环播放(infinite)、以linear方式进行播放。 修改的元素属性为margin-top

动画源码

animation:
[animation-name] [animation-duration] // 动画的名称、持续时间
[animation-timing-function][animation-delay] // 关于时间的函数(properties/t)、延迟时间
[animation-iteration-count] [animation-direction] // 播放次数、播放顺序
[animation-fill-mode] [animation-play-state]; // 播放前或停止后设置相应样式、控制动画运行或暂停

1.时间函数

（animation-timing-function） animation-timing-function属性定义了动画的播放速度曲线。 可选配置参数为: ease、 ease-in、 ease-out、 ease-in-out、 linear、 cubic-bezier(number, number, number, number)

2.动画方向

（animation-direction） animation-direction属性表示CSS动画是否反向播放。 可选配置参数为:
single-animation-direction = normal | reverse | alternate | alternate-reverse
animation-direction: normal 正序播放 animation-direction: reverse 倒序播放 animation-direction: alternate 交替播放 animation-direction: alternate-reverse 反向交替播放 animation-direction: normal, reverse animation-direction: alternate, reverse, normal

3.动画延迟

（animation-delay） animation-delay属性定义动画是从何时开始播放，即动画应用在元素上的到动画开始的这段时间的长度。 默认值0s，表示动画在该元素上后立即开始执行。 该值以秒(s)或者毫秒(ms)为单位。

4.动画迭代次数

（animation-iteration-count） animation-iteration-count该属性就是定义我们的动画播放的次数。次数可以是1次或者无限循环。 默认值只播放一次。

single-animation-iteration-count = infinite | number

5.动画填充模式

（animation-fill-mode） animation-fill-mode是指给定动画播放前后应用元素的样式。
single-animation-fill-mode = **none **| **forwards **| **backwards **| both
animation-fill-mode: none 动画执行前后不改变任何样式 animation-fill-mode: forwards 保持目标动画最后一帧的样式 animation-fill-mode: backwards 保持目标动画第一帧的样式 animation-fill-mode: both 动画将会执行 forwards 和 backwards 执行的动作。 6.动画播放状态（animation-timing-function） animation-play-state: 定义动画是否运行或者暂停。可以确定查询它来确定动画是否运行。 默认值为running

single-animation-timing-function = running | paused