css3过渡transition学习总结

过渡

1.过渡简写 transition：param1 param2

• param1 要过渡的属性 all 表示所有属性
• param2 过渡的时间 秒为单位 如：1s
• 过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
• 补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态
• 帧动画：扑克牌切换.通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
• 特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。

 1 .box{
 2             width: 200px;
 3             height: 200px;
 4             border:1px solid #000;
 5             margin: 100px auto;
 6             background-color: red;
 7             /*transition: width 2s,background-color 2s;*/
 8             /*如果多个过渡的特效相同，可以简写，过渡必须加给盒子本身*/
 9             /*transition:过渡属性,过渡时间,速度曲线(linear匀速),延迟时间*/
10             transition: all 2s linear 1s;
11         }

2.过渡属性拆解

• transition-property设置过渡属性（all代表所有属性）
• transition-duration设置过渡时间 用来控制速度linear(匀速)
• ease(减速) / ease-in(加速) / ease-out(减速) / ease-in-out(先加速后减速)
• transition-timing-function设置过渡速度
• transition-delay设置过渡延时 超过时间后执行动画.

    
    
    



    
CSS3-过渡详解
    

        
移动
        

            

        
    
    

        
ease
        

            

        
    
    

        
ease-in
        
 

    
    

        
ease-out
        
 

    
    

        
ease-in-out
        
 

    

下面是一个案例：

    
    
    



    4亿网友共同信赖