CSS3如何让简单代码轻松实现页面动画？
网友解答: 超能网专注于优质内容创作，致力于有价值传播，欢迎点击关注。CSS3过度动画即为transition属性，使css属性的变化是可以连续的、时间可控制的、可以控制变化曲线的；无论
超能网专注于优质内容创作，致力于有价值传播，欢迎点击关注。
CSS3过度动画即为transition属性，使css属性的变化是可以连续的、时间可控制的、可以控制变化曲线的；无论是鼠标的点击(click)事件还是鼠标的移上事件(hover)，只要通过transition就能让指定的元素在设置的时间内平滑的发生改变。首先介绍一下transition，最后附上例子。
transition总共包含了四个属性，分别是：property(产生动画的属性)、duration(设置整个动画的时间)、timing-function(设置动画的变化曲线)、delay(动画的初始值或者称之为动画发生的延迟时间)。
transition-property变化的值，例如：{transition-property:width}，这是表示产生变化的是元素的宽度。如果不用单独定义不同的变化时间或曲线，可以直接写为all。(一般方便起见，我们默认用all即可)
transition-duration变化的时间。可以精确到小数点后一位，单位s（秒）。例如：{transition-duration:0.4s}。
transition-delay设置变化的起始值，简单理解就是如果设置了transition-delay为0.1秒，变化会从0.1秒开始发生，也就是会延迟0.1秒才会发生变化，默认为0。
transition-timing-function设置动画变化曲线，简单理解就是动画按照哪一种函数来改变运行速度。默认值为easy，相当于 cubic-bezier(0.25, 0.1, 0.25, 1.0).简单说就是平均变化，速度一样。
ease-in： 相当于 cubic-bezier(0.42, 0, 1.0, 1.0).先慢后快的变化。
ease-out： 相当于 cubic-bezier(0, 0, 0.58, 1.0).和ease-out相反，先快后慢的变化。
ease-in-out： 相当于 cubic-bezier(0.42, 0, 0.58, 1.0).启动慢中间快收尾慢的变化，就是两头慢，中间运动速度快。
linear： 相当于 cubic-bezier(0.0, 0.0, 1.0, 1.0).和ease-in-out相反，启动和收尾快，即为开始与结束时间段的速度快，中间慢。
ease-out:元素样式从初始状态过渡到终止状态时，速 度越来越慢，呈一种减速状态,先慢后快的变换。等同于贝塞尔曲线 (0，0，0.58，1)。
贝塞尔曲线网址：http://cubic-bezier.com
transition合并的写法，例如对某个div使用{transition:opacity 0.4s ease 0s}，前面就是表示这个div的透明度发生变化，整个过程用了0.4s,以easy曲线速度进行变化，动画开始的延迟时间为0s。还可以一次写多个属性变化，例如{transition:background, 0.4s ease-out 0s, color 0.4 ease-out 0s;}，为了方便，也可以写成{transition:all 0.4s ease} 。
另外，我们需要兼顾到浏览器的兼容性问题。为了更好的使用过渡动画，最好在transition前面将下列四大内核的兼容前缀加上。浏览器兼容性：1. -webkit-: 谷歌、Safari 浏览器2. -moz-: 火狐3. -o-: 欧朋4. -ms-: IE浏览器
最后举一个简单的例子(可以拷贝至代码编辑器里然后用浏览器预览一下):<!DOCTYPE html<html<head<meta charset="utf-8"</head<style type="text/css"div{width:200px;height:200px;margin:200px auto;background: tan;-webkit-transition:all 0.6s ease-out 1s;-moz-transition:all 0.6s ease-out 1s;-o-transition:all 0.6s ease-out 1s;-ms-transition:all 0.6s ease-out 1s;}div:hover{height:500px;}</style<body<div</div</body