css3-过渡笔记

css3过渡transition
 
A：------------------------
    功能：    属性值在一定的时间区间内平滑的过渡（在鼠标单击、获得焦点、被点击或对元素任何改变中触发）
    
    步骤：
        声明元素的初始状态样式
        
        声明最终状态样式
            
        默认样式中通过添加过渡函数，添加一些不同的样式
 
 
B：-------------------------
single transition===
 
    transition： [ <'transition-property' || <'transition-duration'> || <'transition-time-function'> || <'transition-delay'> |  
        
                ...(again)        >
        
            transition-property: 指定过渡或者动态模拟的css属性
            transition-duration: 完成过渡所需要的时间     time
            transition-timing-function： 过渡函数
            transition-delay： 过渡开始出现的延迟时间    time    
    
 
c：----------transition-property--------------
 
    transition-property： none | all | <single-transition-property>*
 
 
        none:        没有样式
 
        all：        默认，指定所有元素支持    (只有元素具有一个中点值的属性才能具备过渡效果)
 
        <sin**>：    指定样式，其等于all或者<IDENT>  
    
            值：         颜色、        具有长度值、百分比的属性、    integer真实数字属性、    number数值属性、    变形系列、
                rectangle、    visibility、    阴影、        渐变、        paint server(SVG)从gradient到gradient，从color到color
                space-separated list of above列表有相同项目数值、    缩写属性
        ==同时设置多个时间，用‘，’隔开
 
c：----------transition-duration--------------
        
    transition-duration: <time>*
 
        time: 数值，单位为 s/ms，默认为0
            可以作用与任何元素，包括:before/:after
 
        ==同时设置多个时间，用逗号隔开
        ==同一个时间无需设置多次
            
 
D：--------transition-timing-function------------
    
    transition-timing-function： <single-transition-timing-function>*
        
        single-timing-function:  
 
            1. 单一的过渡函数
 
 
                                    初始到终止过渡速度
 
                ease：                    默认，由快到慢，逐渐变慢
            
                linear：                恒速
            
                ease-in：                越来越快，渐显
 
                ease-out：                越来越慢，渐隐
    
                ease-in-out：                先加速后减速
        
            2.三次贝塞尔曲线
 
 
                cubic-bezier： （p0，p1，p2，p3）；    // 0~1的数值
 
 
            3.step函数
 
 
                ==固定是间隔播放动画
                    step（<integer> [,[start] | [end] ]?）
                        
                        第一个参数： integer: 指定间隔的数量 ！！！正整数
 
                        第二个参数： 可选。 默认end
                            eg: step(7,end)=动画发生在七个步骤的最后一步
 
    
 
            
D：--------transition-duration------------
 
        transition-duration： <time>*    ：整数
            = 动画开始的时间
            
            正整数： 过了设定值之后执行
            负整数： 从改点显示，之前的动作截断
            0：    立即触发