Ninachow的博客园

CSS3 过渡

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。 要实现这一点，必须规定两项内容：1， 指定要添加效果的CSS属性； 2，指定效果的持续时间。

过渡属性

1，transition-property： 规定应用过渡的 CSS 属性的名称。

                 
/*将鼠标悬停在一个div元素上，逐步改变表格的 -宽度- ：*/
div 
{ 
transition-property:width;       /*仅宽度变化*/
-moz-transition-property: width; /* Firefox 4 */ 
-webkit-transition-property:width; /* Safari and Chrome */ 
-o-transition-property:width; /* Opera */ 
} 
div:hover {width:300px;}  

/*  其他参数值*/
div 
{ 
transition-property:none;       /* 没有属性会获得过渡效果。*/
transition-property:all;        /* 所有属性都将获得过渡效果。 */
transition-property: width,height;   /* 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。*/
}                      
                
            

2，transition-duration：规定过渡所用时间

                
/*  最后5秒出现切换效果： */
div 
{
    transition-duration: 5s;         /*  规定完成过渡效果需要花费的时间（以秒或毫秒计） */
    -webkit-transition-duration: 5s; /* Safari */
    transition-duration: 0;          /* 默认值是 0，意味着不会有效果。 */
}                    
                
            

3，transition-timing-function： 规定过渡效果的时间曲线

                
/*  转场效果以同样的速度从开始到结束： */
div 
{
    transition-timing-function: linear;  /*  */
    -webkit-transition-timing-function: linear; /* Safari and Chrome */
}     
/*  其他参数设置  */
div
{
    transition-timing-function: ease;    /* 默认值- 规定慢速开始，然后变快，然后慢速结束的过渡效果*/
    transition-timing-function: linear;  /* 规定以相同速度开始至结束的过渡效果 */
    transition-timing-function: ease-in;  /* 规定以慢速开始的过渡效果 */
    transition-timing-function: ease-out;  /* 规定以慢速结束的过渡效果 */
    transition-timing-function: ease-in-out;  /* 规定以慢速开始和结束的过渡效果 */
    transition-timing-function: cubic-bezier(n,n,n,n);  /* 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 */
}
                
            

4，transition-delay： 规定过渡效果何时开始。

                 
/*    transition-delay值是指以秒为单位（S）或毫秒（ms）, 指定秒或毫秒数之前要等待切换效果开始.*/
div
{
    transition-delay: 2s;     /*  等待2秒前切换效果开始： */
    -webkit-transition-delay: 2s; /* Safari */
    transition-delay: 0;      /* 默认值 0 - 不需要等待，直接执行 */
}
                 
             

5，transition 组合属性。速记属性有四个属性（以上4个属性），通常使用组合写法

                
div
{
    transition-property: width; 
    transition-duration: 5s; 
    transition-timing-function: linear; 
    transition-delay: 2s;

    transition: width 5s linear 2s;   /*  名称 耗时 速度 延迟*/

}