CSS3中transition过渡效果（详解）

CSS3中transition过渡效果

CSS3 过渡

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。

transition 过渡为一个元素在不同的状态之间切换的时候定义过渡的效果

例如 伪元素 :hover  :active

transition 是一个复合属性

格式：transition: property duration function delay

div

{

transition: width 2s, height 2s, transform 2s;

-webkit-transition: width 2s, height 2s, -webkit-transform 2s;

}

过渡属性

下表列出了所有的过渡属性：

transition	为一个元素在不同的状态之间切换的时候定义过渡的效果
transition-property	进行过渡效果的属性名 取值可以取多个，多个属性值之间用逗号隔开 all  指全部属性 none  不设过渡动画
transition-duration	过渡动画的时间 取值可以取多个，多个属性值之间用逗号隔开，每个时间都会应用到对应的属性上，取值不可为负数，0s则不会出现过渡动画
transition-timing-function	过渡动画的效果，规定过渡效果的时间曲线  linear 线性  ease  ease-in  ease-out  ease-in-out
transition-delay	过渡动画的延迟（意为，等待一段时间后，再执行动画）

 

可动画属性列表：

1. 属性类  width  height  opacity
2. 盒模型 margin  padding border-width border-color border-radius box-shadow
3. 定位类  top  right  bottom  left
4. 字体类  font-size  font-weight  color  text-shadow
5. 变换类  transform

 下面来看一下实际案例吧！图片的话自己换：

    
    
    
    
    


    

        

            

                

                    特别关注
                
            
            

                

                    
                    
                        
小央视频
                        央视频原创视频子品牌，以更加贴切年轻人的视角，有趣，有料，有故事的方式解读时代。
                    
                
                

                    
                    
                        
小央视频
                        央视频原创视频子品牌，以更加贴切年轻人的视角，有趣，有料，有故事的方式解读时代。
                    
                
                

                    
                    
                        
小央视频
                        央视频原创视频子品牌，以更加贴切年轻人的视角，有趣，有料，有故事的方式解读时代。
                    
                
                

                    
                    
                        
小央视频
                        央视频原创视频子品牌，以更加贴切年轻人的视角，有趣，有料，有故事的方式解读时代。
                    
                
                

                    
                    
                        
小央视频
                        央视频原创视频子品牌，以更加贴切年轻人的视角，有趣，有料，有故事的方式解读时代。
                    
                
            
            
        
    

运行效果：

它是如何工作？

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点，必须规定两项内容：

• 指定要添加效果的CSS属性
• 指定效果的持续时间。

 你学会了吗？