Preface页面效果是很重要的一环。好的页面效果可以让用户感觉舒服，吸引更多的用户。既然是页面效果，动画肯定是少不了的，所以本文先说一下transition的css3属性。初步了解过渡过渡提供了一种在更改CSS属性时控制动画速度的方法。它可以使属性更改成为一个持续一段时间的过程，而不是立即生效。（摘自MDN）用法及其写法（为了兼容，需要加上厂商前缀，这里就不写了）：transition:也可以用逗号，写更多的函数对于未使用的属性（property）transition:,每个角色@value默认值角色propertynone/all/propertyall作用于需要过渡的属性durationtime0过渡时序函数所需要的时间-li??near/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n,n)ease指定过渡效果的速度Curvedelaytime(同duration)0transitioning之前延迟多长时间属性：可过渡的CSS属性，有些属性不是。时间：以秒（如1s）或毫秒（如1000）为单位。cubic-bezier(x1,y1,x2,y2)：三阶贝塞尔曲线。linear,ease等都是由它计算出来的。x轴的取值范围：在[0,1]区间内，y轴可以是任意值。可在线定制。动手基本操作//css#box{width:100px;高度：100px；背景色：浅绿色；过渡：全1；-webkit-transition：全1；-moz-transition：全1；-ms-transition:全部为1；-o-transition:all1s;}#box:hover{width:500px;margin-top:100px;}//html
#box的样式中包含transition，要触发它，需要更改上面提到的属性。当鼠标移到div上时，宽度和marin-top发生变化，触发过渡。all：表示所有可转换属性都可用。1s：在第二项中，即duration。过渡所需的时间。简单的类图片无缝滑动//css*{margin:0;填充：0；}#box{边距：0自动；宽度：100px；高度：100px；溢出：隐藏；}#img_container{位置：相对；宽度：400px；过渡：所有.7s线性；-webkit-transition：所有.7s线性；-moz-transition：所有.7s线性；-ms-transition：所有.7s线性；-o-transition:all.7slinear;}#img_containerspan{display:inline-block;宽度：100px；高度：100px；文本对齐：居中；行高：100px；背景色：黄色；}#img_containerspan：nth-??of-type（偶数）{背景色：红色；}ul{文本对齐：居中；}li{填充：10px；游标：指针；列表样式：无；display:inline-block;}//html
