css3动画和animate.css动画库使用

CSS3动画

css3动画可以分为两种。transition过渡动画和keyframes关键帧动画

过渡动画

第一种叫过渡（transition）动画，就是从初始状态过渡到结束状态这个过程中所产生的动画。所谓的状态就是指大小、位置、颜色、变形（transform）等等这些属性。css过渡只能定义首和尾两个状态，所以是最简单的一种动画。

要想使一个元素产生过渡动画，首先要在这个元素上用transition属性定义动画的各种参数。可定义的参数有

transition-property：规定对哪个属性进行过渡

transition-duration：定义过渡的时间，默认是0

transition-timing-function：定义过渡动画的缓动效果，如淡入、淡出等，默认是 ease

transition-delay：规定过渡效果的延迟时间，即在过了这个时间后才开始动画，默认是0

为了书写方便，也可以把这四个属性按照以上顺序简写在一个 transition 属性上：

如果是使属性的默认值，则可以省略：

 相当于：

如果想要同时过渡多个属性，可以用逗号隔开，如：

使用transtion属性只是规定了要如何去过渡，要想让动画发生，还得要有元素状态的改变。如何改变元素状态呢，当然就是在css中给这个元素定义一个类（:hover等伪类也可以），这个类描述的是过渡动画结束时元素的状态。

这样，当我们把鼠标移动到div上的时候，div的状态发生了变化，就能看到宽度从100到400，高度从100到400，背景颜色从黑到红的，过渡时间为3秒的过渡效果了。

除了使用hover等系统提供的伪类外，我们也可以随意的定义自己的类，然后想要过渡时就通过js把类加到元素上面：

关键帧动画

第二种叫做关键帧（keyframes）动画。不同于第一种的过渡动画只能定义首尾两个状态，关键帧动画可以定义多个状态，或者用关键帧来说的话，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。

关键帧动画的定义方式也比较特殊，它使用了一个关键字 @keyframes 来定义动画。具体格式为：

@keyframes 动画名称{

时间点 {元素状态}

时间点 {元素状态}

…

}

例如：

这段代码定义了一个名为demo,且有5个关键帧的动画。0% ，10% 等这些表示的是时间点，是相对于整个动画的持续时间来说的，时间点之后的花括号里则是元素的状态属性集合，描述了这个元素在这个时间点的状态，动画发生时，就是从第一个状态到第二个状态进行过渡，然后从第二个状态到第三个状态进行过渡，直到最后一个状态。一般来说，0%和100%这两个关键帧是必须要定义的。

关键帧的书写方式很灵活，一行可以写多个关键帧。

甚至它们之间的空格也是可以不要的。

现在我们知道了怎么去定义一个关键帧动画了，那怎么去实现这个动画呢？其实很简单，只要把这个动画绑定到某个要进行动画的元素上就行了。

把动画绑定到元素上，我们可以使用animation属性。animation属性有以下这些：

像前面讲的transition属性一样，也可以把这些animation属性简写到一个animation中，使用默认值的也可以省略掉。但 animation-play-state 属性不能简写到animation中。

只要像这样把定义好的动画绑定到元素上，就能实现关键帧动画了，而不是像第一种过渡动画那样，需要一个状态的改变才能触发动画。

--------------------------------------------------------------------------------------------------------------------

注意，为了达到最佳的浏览器兼容效果，在实际书写代码的时候，还必须加上各大浏览器的私有前缀

animate.css的使用

1.html版本

animate.css是一个css3动画库，可以到github上去下载，里面预设了很多种常用的动画，使用也很简单，因为它是把不同的动画绑定到了不同的类里，所以我们想要使用哪种动画的时候，只需要简单的把那个相应的类添加到元素上就行了：

首先在head中引入下载的animate.css文件

然后你想要哪个元素进行动画，就给那个元素添加上animated类 以及特定的动画类名，animated是每个要进行动画的元素都必须要添加的类。

假设使用jquery，要给一个id为demo的元素添加一个摇动的动画,因为摇动的动画类名为shake，所以代码是这样的：

这样载入页面，元素就能动起来了。你也可以在动画完成后，把动画类移除，以便可以再次进行同一个动画。

至于动画的配置参数，比如动画持续时间，动画的执行次数等等，你可以在你的的元素上自行定义，覆盖掉animate.css里面所定义的就行了。

注意这些属性还要记得加上各浏览器的前缀。

总之是很灵活的，说到底不就是一个css文件吗，一看就懂的，你在里面想怎么整就怎么整，不想用它提供的类名，就在里面改掉就行了。如果你只想用里面的部分动画，也可以把那些要使用的动画分离出来，它的官网也提供了这样的功能。

2.vue版本

1.安装animate.css

npm install animate.css --save安装

2.引入

方式1 在style中引入(加了scoped只在当前组件使用，没有加则全局可用)

<style lang="scss" scoped>
@import 'animate.css';

</style>

方式2 在main.js全局引入（全局可用）

import 'animate.css'

方式3在script引入（全局可用）

<script>
import Header from '../components/common/Header'
import 'animate.css'
export default {

}
</script>

3.添加样式 必须添加animated类 +想要动画效果

<h3 class="animated bounceInUp" v-if="flag">弹跳进入，弹跳出去效果</h3>

4.想要更好效果可用vue自带的transition包裹组件

　　在进入/离开的过渡中，会有 6 个 class 切换。

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

完整例子

<template>
  <section class="home">
    <v-header></v-header>
    <div>主页</div>
    <input type="button" value="显示/隐藏" @click="flag=!flag" :duration="2000">
    <transition enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown">
        <h3 v-if="flag">弹跳进入，弹跳出去效果</h3>
        <!--通过一个标识符，然后可以不停将转换true/false，达到隐藏显示的目的-->
    </transition>
  </section>
</template>

<script>
import Header from '../components/common/Header'
export default {
  name:'home',
  components:{'v-header':Header
  },
  data(){
    return{
      flag:false
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'animate.css';
</style>

补充：

Swiper中使用Animate.css

转载css3动画简介以及动画库animate.css的使用