CSS3过渡动画&关键帧动画

1、过渡动画

过渡（transition）动画，就是从初始状态过渡到结束状态这个过程当中所产生的动画。
所谓的状态就是指大小、位置、颜色、变形（transform）等等这些属性。

Note：不是全部属性都能过渡，只有属性具备一个中间点值才具有过渡效果。
点击查看完整列表。

css过渡只能定义首和尾两个状态，因此是最简单的一种动画。
注释：Internet Explorer 9 以及更早版本的IE浏览器不支持 transition 属性。

如何在项目中正确、熟练地应用transition动画？

第一步：在目标元素的样式声明中定义元素的初始状态，而后在同一声明中用 transition 属性配置动画的各类参数。

可定义的参数有：

• transition-property：规定对哪一个属性进行过渡。
• transition-duration：定义过渡的时间，默认是0。
• transition-timing-function：定义过渡动画的缓动效果，如淡入、淡出等。
• linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
• ease（默认值）规定慢速开始，而后变快，而后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
• ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
• ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
• ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
• cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义本身的值。可能的值是 0 至 1 之间的数值。
• transition-delay：规定过渡效果的延迟时间，即在过了这个时间后才开始动画，默认是0。

注意：要在同一代码块中定义元素初始状态（样式），添加transition属性。
若是想要同时过渡多个属性，能够用逗号隔开。

 

 

第二步：改变元素的状态。

为目标元素添加伪类或添加声明了最终状态的类。
使用 transtion 属性只是规定了要如何去过渡，要想让动画发生，还得要有元素状态的改变。如何改变元素状态呢，固然就是在css中给这个元素定义一个类（:hover等伪类也能够），这个类描述的是过渡动画结束时元素的状态。

除了使用hover等系统提供的伪类外，咱们也能够随意的定义本身的类，而后想要过渡时就经过js把类加到元素上面。

注意：单纯的代码不会触发任何过渡操做，须要经过用户的行为（如点击，悬浮等）触发。可触发的方式有：:hover :focus :checked 媒体查询触发 JavaScript触发。

示例1：

 

 

示例2：
当鼠标悬停在img元素上时，改变img元素的尺寸。改变的整个过程是平滑过渡的，不是快速、突兀的。

img { height:15px; /*初始值*/ width:15px; transition:1s1s height; /*过渡*/ } img:hover { height:450px; /*最终值*/ width:450px; } 

过渡动画的局限性

transition的优势在于简单易用，可是它有几个很大的局限。
（1）transition须要事件触发，因此无法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。

2、关键帧动画

不一样于过渡动画只能定义首尾两个状态，关键帧动画能够定义多个状态，或者用关键帧的话来讲，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则能够定义任意多的关键帧，于是能实现更复杂的动画效果。

注释：Internet Explorer 9 以及更早的IE版本不支持 animation 属性。

如何在项目中正确、熟练地应用animation动画？

animation就至关于用@keyframes预先定义好元素在整个过渡过程当中将要经历的各个状态，而后再经过animation属性将这些状态一次性赋给该元素。

第一步：经过相似Flash动画中的帧来声明一个动画。

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

@keyframes 动画名称 { 时间点 {元素状态} 时间点 {元素状态} …} 

通常来讲，0%和100%这两个关键帧是必需要定义的。0%能够由from代替，100%能够由to代替。

第二步：在目标元素的样式声明中使用animation属性调用关键帧声明的动画。

如今咱们知道了怎么去定义一个关键帧动画了，那怎么去实现这个动画呢？其实很简单，只要把这个动画绑定到某个要进行动画的元素上就好了。把动画绑定到元素上，咱们可使用animation属性。

可配置的参数有：

• animation-name：none为默认值，将没有任何动画效果，其能够用来覆盖任何动画。
• animation-duration：默认值为0s，意味着动画周期为0s，也就是没有任何动画效果。
• animation-timing-function：与transition-timing-function同样。
• animation-delay：在开始执行动画时须要等待的时间。
• animation-iteration-count：定义动画的播放次数，默认为1，若是为infinite，则无限次循环播放。
• animation-direction：默认为nomal，每次循环都是向前播放，（0-100）。另外一个值为alternate，动画播放为偶数次则向前播放，若是为基数词就反方向播放。
• animation-state：默认为running，播放，paused，暂停。
• animation-fill-mode：定义动画开始以前和结束以后发生的操做。
• none（默认值），动画结束时回到动画没开始时的状态；
• forwards，动画结束后继续应用最后关键帧的位置，即保存在结束状态；
• backwards，让动画回到第一帧的状态；
• both：轮流应用forwards和backwards规则；

注意：只要把定义好的动画绑定到元素上，就能实现关键帧动画了，而不是像第一种过渡动画那样，须要一个状态的改变才能触发动画。
animation属性到目前为止获得了大多数浏览器的支持，可是，须要添加浏览器前缀！另外，@keyframes必需要加webkit前缀。

示例：

div:hover { -webkit-animation:1s changeColor; /*调用动画*/ animation:1s changeColor; } @-webkit-keyframes changeColor { /*声明动画*/ 0% {background:#c00;} 50%{background:orange;} 100%{background:yellowgreen;} } @keyframes changeColor { 0%{background:#c00;} 50%{background:orange;} 100%{background:yellowgreen;} } 

过渡动画与关键帧动画的区别

animation属性相似于transition，他们都是随着时间变化而改变元素的属性值，其主要区别在于：transition须要触发一个事件才会随着时间改变其CSS属性；animation在不须要触发任何事件的状况下，也能够显式的随时间变化来改变元素CSS属性，达到一种动画的效果。

3、animate.css动画库

animate.css是一个css3动画库，能够到github上去下载，里面预设了不少种经常使用的动画，使用也很简单，由于它是把不一样的动画绑定到了不一样的类里，因此咱们想要使用哪一种动画的时候，只须要简单的把那个相应的类添加到元素上就好了。

该库大体包含以下这些动画效果：

1. bounce（跳动）、flash（闪光）、pulse（脉冲）、rubber band（橡皮筋）、shake（抖动）、swing（摇摆）、wobble（摇摆不定）
2. fade（淡入或淡出）
3. flip（翻转）
4. rotate（旋转）
5. slide（滑动）
6. zoom（放大或缩小）

如何在项目中正确、熟练地应用animate动画库？

（1）：在head中引入animate.min.css文件。
注：因为animate.min.css默认包含全部的动画效果。所以当咱们仅使用其中的几个动画效果时，咱们最好使用gulp构建仅包含咱们需求的animate.min.css，这样能够避免咱们引入的animate.min.css文件体积过大。

如何使用gulp构建符合咱们需求的animate.min.css？

第一步：将整个animate.css项目下载下来，做为生产环境的依赖：

npm install animate.css --save 

第二步：进入animate.css项目根目录下：

$cd path/to/animate.css/ 

第三步：加载dev依赖：

npm install

第四步：根据实际须要修改animate-config.json文件：
例如：咱们只须要这两个动画效果：bounceIn和bounceOut。

{
    "bouncing_entrances": [ "bounceIn" ], "bouncing_exits": [ "bounceOut" ] } 

最后一步：进入animate.css项目下，运行gulp任务:gulp default，生成新的animate.min.css覆盖默认的animate.min.css。

（2）你想要哪一个元素进行动画，就给那个元素添加上animated类 以及特定的动画类名，animated是每一个要进行动画的元素都必需要添加的类。

 

 

你也能够在动画完成后，把动画类移除，以即可以再次进行同一个动画。

 

 

至于动画的配置参数，好比动画持续时间，动画的执行次数等等，你能够在你的的元素上自行定义，覆盖掉animate.min.css里面所定义的就好了。注意添加浏览器前缀。