CSS3 transition基本属性总结

transition属性主要包含4个属性值

  1. transition-property:指定过度或动态模拟的CSS属性
  2. transition-duration:指定完成过渡所需的时间
  3. transition-timing-function:指定过渡函数
  4. transition-delay:指定过渡开始出现的延迟时间

transition-property

通过transition-property属性来指定过渡动画的CSS属性名称

  1. none:没有指定任何样式
  2. all:默认值,表示指定元素所有支持transition-property
  3. <single-transition-property>:指定样式

不是所有属性都可以过渡,只有属性具有一个中点值得属性才能具备过渡效果

  • 颜色属性:通过红绿蓝和透明度组合的过渡(每个数值处理),如background-color,border-color,color,outline-color
  • 具有长度值,百分比的属性,如word-spacing,width,vertical-align,top,right,left,min-width,min-height,max-width,max-height,line-height,height,background-popsition
  • 整数,在真实的数字空间以及使用floor()转换为整数时发生,outline-offset,z-index
  • 真实的浮点型数值:如zoom,opacity,font-weight
  • 变形系列属性:如rotate(),rotate3d(),scale(),scale3d(),skew(),translate(),translate3d()
  • rectangle:通过x,y,width和height转为数值变换,如crop属性
  • visiblility:离散步骤,在0-1范围内
  • 阴影:作用于color,x,y和blur属性.如text-shadow属性
  • 渐变:通过每次停止时的位置和颜色进行变化。它们必须有相同的类型和相同的停止数值以便执行动画,如background-image属性
    • SVG:只支持从gradientgrandient,以及colorcolor

transition-duration

transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间,即从旧属性过渡到新属性花费的时间,可以作用于所有元素,包括:before和:after伪元素。其默认值为0

可以设置多个过渡时间,每个值之间用逗号分隔

transition-timing-function

几个一般常用的函数

三次贝塞尔曲线

带有控制点的三次贝塞尔曲线

P0和P3的二个点是无法设置的。因为它们总是存在HTML中。总是(0,0)和(1,1)

CSS3的transition中定义三次贝塞尔曲线的语法是

p1(P0,P1),p2(P2,P3)  
cubic-bezier(P0,P1,P2,P3)  

没个点值只允许0-1的值

step()

step()函数用于把整个操作领域划成同样大小的间隔都是相等的。该函数还指定发生在开始或结束的时间间隔是否输出百分比

它允许在固定的间隔播放动画。

主要语法

step(<integer>[,[start,end]]?)

第一个参数是一个数值,主要用来指定step()函数间隔的数量,此值必须是一个大于0的正整数,第二个参数是可选的,是start或end,如果第二个参数忽略,则默认为end值

transition-delay

用来定义过渡延迟时间,指定一个动画开始的时间,它可以是正整数,负整数和0。

正整数时元素的过渡动作不会立即触发,当过了设定的时间值之后才会触发

负整数时元素的过渡动作会从该时间点开始显示,之前的动作被截断

0时元素的过渡动作会立即触发,没有任何延迟

多个CSS3过渡效果

使用多个过渡,并且transition-duration,transition-timing-function,transition-delay属性相同,只需要transition-property用逗号分隔每个过渡属性,其他的属性只要设置一个

.transition {
    transition-property:width,background-color,height;
    transition-duration:2s;
    transition-timing-function:ease;
    transition-delay:.5s;
}

.transition {
    transition:width 2s ease .5s,
                         background-color 2s ease .5s,
                         height 2s ease .5s;
}

CSS3触发过渡

伪元素触发

使用transition时,常用鼠标(:hover)

.transition {
    background-color:green;
    width:100px;
    height:100px;
    transition:width 2s ease .5s,
                         background-color 2s ease .5s,
                         height 2s ease .5s;
}
.transition:hover {
    background-color:orange;
    width:200px;
    height:50px;
}

:active伪类表示用户单击某个元素并按住鼠标按钮时显示的状态 :focus伪类通常会在元素接受键盘焦点时出现,文文本输入框上将发生过渡

input {  
        background-color:green;
        width:100px;
        transition: background-color 2s ease .5s,width 2s ease .5s;
}
input:focus {  
    background-color:orange;
    width:200px;
}

:checked文本框选中时触发过渡

input[type="radio"] ~ span {  
    width:100px;
    transition:width 2s ease-in 1s;
}
input[type="radio"]:checked ~ span {  
    width:200px;
}

媒体查询触发

.transition {
    background-color:green;
    width:100px;
    height:100px;
    transition: width 2s ease .5s,
                            background-color 2s ease .5s,
                            height 2s ease .5s;
}
@media only screen and (max-width:960px) {
    .transition {
        background-color:orange;
        width:200px;
        height:50px;
    }
}

JavaScript触发

$(function(){
    $("#button").click(function(){
        $(".box").toggleClass("on");
    });
});
.box {
    width:200px;
    height:200px;
    transition:width 2s linear 1s,
                         height 2s ease 1s;
}
.box .on {
    width:300px;
    height:300px;
}