CSS3過(guò)渡模塊簡(jiǎn)單使用

示例: 鼠標(biāo)懸停到div上的時(shí)候修改div寬度

div {
    width: 100px;
    height: 50px;
    background-color: #0094ff;
    /*指定需要過(guò)渡的屬性*/
    transition-property: width;
    /*指定過(guò)渡動(dòng)畫持續(xù)的時(shí)間,0.5s 說(shuō)明需要0.5秒執(zhí)行完過(guò)渡*/
    transition-duration: .5s;
}
div:hover{
    /*必須有屬性發(fā)生變化*/
    width: 200px;
}

記住以上三點(diǎn)就可以通過(guò)CSS3來(lái)做一個(gè)過(guò)渡動(dòng)畫了

1. 指定過(guò)渡屬性transition-property:屬性名稱
2. 指定過(guò)渡動(dòng)畫需要持續(xù)的時(shí)間transtion-duration:時(shí)間(單位秒)支持小數(shù)
3. 執(zhí)行的過(guò)渡屬性必須有變化.
4. 對(duì)于單個(gè)過(guò)渡屬性就是上面的這種方式即可, 如果是多個(gè)過(guò)渡屬性可以使用逗號(hào)隔開(kāi), 切記不可重復(fù)聲明過(guò)渡屬性, 否則后面的會(huì)覆蓋掉前面的.

/*多個(gè)過(guò)渡屬性的使用*/
div {
            width: 100px;
            height: 50px;
            background-color: #0094ff;
            /*指定需要過(guò)渡的屬性*/
            transition-property: width,height;
            /*指定過(guò)渡動(dòng)畫執(zhí)行的時(shí)間,0.5s 說(shuō)明需要0.5秒執(zhí)行完過(guò)渡*/
            transition-duration: .5s,2s;/*.5s對(duì)應(yīng)的就是width過(guò)渡時(shí)間,2s對(duì)應(yīng)height過(guò)渡時(shí)間*/
        }
        div:hover{
            /*必須有屬性發(fā)生變化*/
            width: 200px;
            height: 100px;
        }

CSS3過(guò)渡模塊的其他屬性

• transstion-delay 延遲多久執(zhí)行過(guò)渡, 單位是秒(s)
  示例
  樣式如下

.container{
    width:300px;
    height: 300px;
    background-color: #0094ff;
}
.container ul{
    list-style:none;
    padding:0;
    margin: 0;
}
.container ul li{
    background-color: red;
    color:#fff;
    position: relative;
    left: -150px;
    height: 50px;
    width: 150px;
    margin-top: 2px;
    opacity: 0;
    transition-property: left,opacity;
    transition-duration: .5s,0.5s;

}
.container ul li:nth-child(1){
    transition-delay: .1s;
}
.container ul li:nth-child(2){
    transition-delay: .2s;
}
.container ul li:nth-child(3){
    transition-delay: .3s;
}
.container ul li:nth-child(4){
    transition-delay: .4s;
}
.container ul li:nth-child(5){
    transition-delay: .5s;
}
.container ul:hover li{
    left:0;
    opacity:1;
}

html如下

<div class="container">
    <ul>
        <li>我是過(guò)渡元素li</li>
        <li>我是過(guò)渡元素li</li>
        <li>我是過(guò)渡元素li</li>
        <li>我是過(guò)渡元素li</li>
        <li>我是過(guò)渡元素li</li>
    </ul>
</div>

• transition-timing-function:用來(lái)描述過(guò)渡效果的速度曲線,默認(rèn)ease
  • ease:逐漸慢下來(lái)
  • ease-in:加速
  • ease-out: 減速
  • ease-in-out:先加速后減速
  • linear:勻速
  • cubic-bezier(n,n,n,n):n的取值在0-1之間

示例demo

CSS3過(guò)渡屬性transition簡(jiǎn)寫格式

• 格式transition: 屬性名 過(guò)渡時(shí)間 運(yùn)動(dòng)方式(速度曲線) 延遲時(shí)間, 屬性名 過(guò)渡時(shí)間 運(yùn)動(dòng)方式(速度曲線) 延遲時(shí)間;
• 多個(gè)屬性的話用逗號(hào)分割.
• 簡(jiǎn)寫方式也可以省略后面的兩個(gè)參數(shù), 因?yàn)橹灰付诉^(guò)渡屬性, 指定了過(guò)渡時(shí)間即可.
  示例

div{
    /*給width屬性添加過(guò)渡屬性, 執(zhí)行時(shí)間2s, 運(yùn)動(dòng)方式是ease, 延遲1s*/
    transition:width 2s ease 1s;
}

如果給所有屬性添加過(guò)渡效果可以把要修改的屬性直接寫成all, 如下:

div{
    transition:all 2s ease-in 1s;
}

過(guò)渡模塊彈性效果demo

做過(guò)渡效果的套路:

1. 分析效果, 查看那些屬性發(fā)生變化了
2. 滿足過(guò)渡的三個(gè)條件即可.