CSS3中的过渡属性

CSS3中的过渡属性

1.属性：transition
（1）transition-property规定应用过渡的CSS属性的名称。
（2）transition-duration定义过渡效果花费的时间。默认是0。
（3）transition-timing-function规定过渡效果的时间曲线。默认是“ease”。
ease规定慢速开始，然后变快，然后慢速结束的过渡效果。
linear规定以相同的速度开始至结束的过渡效果。
ease-in规定以慢速开始的过渡效果。
ease-out规定以慢速结束的过渡效果。
ease-in-out规定以慢速开始和结束的过渡效果。
transition-delay规定过渡效果何时开始。默认是0。
transition:[transition-property] || [ transition-duration] || [transition-timing-function ] || [ transition-delay]简写属性，用于在一个属性中设置四个过渡属性。

注释：CSS3过渡是元素从一种样式逐渐改变为另一种效果，要实现这一点，必须规定两项内容：
1.规定把效果添加到哪个CSS属性上
2.规定效果的时长
IE10、Firefox、Chrome以及Opera支持transition属性。Safari需要前缀-webkit-。

例1：当鼠标光标移动到该元素时，它逐渐改变它原有样式

div{ width:100px; height:100px;
 background:red; transition:width 2s;
  -webkit-transition:width 2s; }
  div:hover{ width:300px; 
  }

例2：多属性过渡

div{width: 300px; height: 300px;
 background: #fdff1f;
  border: #ffae28 solid 3px; 
  margin: 100px auto;
  transition: all 0.5s; }
 div:hover{width: 500px; height: 400px;
  border-radius: 15px; 
  background: #ff67c2; }