transitiion过渡属性

transition过渡属性是指，当css样式属性发生变化的时候，中间有一个变化的过程，该属性就是为了描述这个过程在呢么变化的。

例子：

[html] view plain copy print ? #div1{          width: 200px;          height: 200px;          background-color: blue;          /* transition css3属性，表示的是过渡 ，表示一个元素的样式，变成另外一个样式，有动画的过程,必须写在原来属性中,ease表示不是匀速的。默认是匀速的，延迟0s开始*/          transition: all 2s ease 0s;      }   #div1:hover{          background-color: green;          width: 0px;          height: 0px;          /* border-radius: 50%;          box-shadow: 2px 2px 2px black; */          /*transform:旋转属性(度数)          translateX:移动属性*/      }    #div1{ width: 200px; height: 200px; background-color: blue; /* transition css3属性，表示的是过渡 ，表示一个元素的样式，变成另外一个样式，有动画的过程,必须写在原来属性中,ease表示不是匀速的。默认是匀速的，延迟0s开始*/ transition: all 2s ease 0s; } #div1:hover{ background-color: green; width: 0px; height: 0px; /* border-radius: 50%; box-shadow: 2px 2px 2px black; */ /*transform:旋转属性(度数) translateX:移动属性*/ }

如上例所示，就可以看到css样式变化的过程，而transition这个属性就描述了，相应的例子中也写了它相关的几个条件，分别是CSS属性的名称，过渡时间，过渡方式，延迟时间。

下表列出了所有的过渡属性:

属性描述CSStransition简写属性，用于在一个属性中设置四个过渡属性。3transition-property规定应用过渡的 CSS 属性的名称。transition-property:width3transition-duration定义过渡效果花费的时间。默认是 0。transition-duration: 2s;3transition-timing-function规定过渡效果的时间曲线。默认是 "ease"。transition-timing-function:linear;3transition-delay规定过渡效果何时开始。默认是 0。transition-delay: 2s;3

下面的两个例子设置所有过渡属性：

实例

在一个例子中使用所有过渡属性：

div { transition-property: width ; transition-duration: 1 s ; transition-timing-function: linear ; transition-delay: 2 s ; /* Safari */ - webkit-transition-property: width ; - webkit-transition-duration: 1 s ; - webkit-transition-timing-function: linear ; - webkit-transition-delay: 2 s ; }