CSS设置过渡

p{
width: 300px;
height: 300px;
background-color: yellow;

}
p:hover{                                   hover是鼠标悬停的意思。
width: 400px;
height: 400px;
background-color: red;

4个子属性

transition有4个子属性：transition-property，transition-duration，transition-timing-function，transition-delay

transition-property指定需要过渡的CSS属性。并不是所有属性都能过渡的，只有能数字量化的CSS属性才能过渡。哪些属于能数字量化的CSS属性呢？例如：

颜色系，如color，background-color，border-color，outline-color等

数字系，实在太多了，如width，height，top，right，bottom，left，zoom，opacity，line-height，background-position，word-spacing，font-weight，vertical-align，outline-outset，z-index等。

---------------------

transition:                             简写下面四中属性的方式 。

可以单独指定这4个子属性，也可以像background等属性一样，合并在transition属性里指定。但合并时要注意，因为有transition-duration和transition-delay都是时间，浏览器会根据先后顺序，将第一个时间认作为transition-duration，第二个时间认作为transition-delay。

是分开或者合并指定并无标准答案。分开指定可能代码易读性高一点。但当页面需要适应各浏览器时，每个都要加上-ms-，-moz-等前缀，代码会变的很多，合并在一起代码稍微少点。另外也可以同时指定多个过渡效果，例如transition: background 1s linear 2s, border-radius 2s ease-in 3s;。

-----------------------------

transition-delay:1s;               从什么时间开始过渡。这里是从一秒后开始的

transition-duration:2s;          过渡花费的时间。用这个就出现过度效果了。贼特么科幻。

transition-property:width;     规定某个属性的过渡。这个是只过渡宽度 其他的不过度。

transition-timing-function:    下面有四种贝塞尔活动

#div1 {transition-timing-function: linear;}                                          默认的平滑
#div2 {transition-timing-function: ease;}                                           先快再慢
#div3 {transition-timing-function: ease-in;}                                      理解成又慢变快
#div4 {transition-timing-function: ease-out;}                                     先快后慢
#div5 {transition-timing-function: ease-in-out;}                                 慢快慢

 

-------------------------------------------------------------------------

-moz-transition:     支持火狐浏览器更早的版本

-webkit-transition:   支持谷歌和IE浏览器更早版本

-o-transiton             支持 OPERA浏览器更早的版本