CSS3过渡模块简单使用

示例: 鼠标悬停到div上的时候修改div宽度

div {
    width: 100px;
    height: 50px;
    background-color: #0094ff;
    /*指定需要过渡的属性*/
    transition-property: width;
    /*指定过渡动画持续的时间,0.5s 说明需要0.5秒执行完过渡*/
    transition-duration: .5s;
}
div:hover{
    /*必须有属性发生变化*/
    width: 200px;
}

记住以上三点就可以通过CSS3来做一个过渡动画了

1. 指定过渡属性transition-property:属性名称
2. 指定过渡动画需要持续的时间transtion-duration:时间(单位秒)支持小数
3. 执行的过渡属性必须有变化.
4. 对于单个过渡属性就是上面的这种方式即可, 如果是多个过渡属性可以使用逗号隔开, 切记不可重复声明过渡属性, 否则后面的会覆盖掉前面的.

/*多个过渡属性的使用*/
div {
            width: 100px;
            height: 50px;
            background-color: #0094ff;
            /*指定需要过渡的属性*/
            transition-property: width,height;
            /*指定过渡动画执行的时间,0.5s 说明需要0.5秒执行完过渡*/
            transition-duration: .5s,2s;/*.5s对应的就是width过渡时间,2s对应height过渡时间*/
        }
        div:hover{
            /*必须有属性发生变化*/
            width: 200px;
            height: 100px;
        }

CSS3过渡模块的其他属性

• transstion-delay 延迟多久执行过渡, 单位是秒(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>我是过渡元素li</li>
        <li>我是过渡元素li</li>
        <li>我是过渡元素li</li>
        <li>我是过渡元素li</li>
        <li>我是过渡元素li</li>
    </ul>
</div>

• transition-timing-function:用来描述过渡效果的速度曲线,默认ease
  • ease:逐渐慢下来
  • ease-in:加速
  • ease-out: 减速
  • ease-in-out:先加速后减速
  • linear:匀速
  • cubic-bezier(n,n,n,n):n的取值在0-1之间

示例demo

CSS3过渡属性transition简写格式

• 格式transition: 属性名 过渡时间 运动方式(速度曲线) 延迟时间, 属性名 过渡时间 运动方式(速度曲线) 延迟时间;
• 多个属性的话用逗号分割.
• 简写方式也可以省略后面的两个参数, 因为只要指定了过渡属性, 指定了过渡时间即可.
  示例

div{
    /*给width属性添加过渡属性, 执行时间2s, 运动方式是ease, 延迟1s*/
    transition:width 2s ease 1s;
}

如果给所有属性添加过渡效果可以把要修改的属性直接写成all, 如下:

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

过渡模块弹性效果demo

做过渡效果的套路:

1. 分析效果, 查看那些属性发生变化了
2. 满足过渡的三个条件即可.