通过CSS3属性值的变化实现动画效果+触发这些动画产生交互

css3过渡

transition

兼容性:IE10+

 

transition: none | all | property

默认为none

all 表示所有属性过渡

property 指定属性值,如color   opacity

<!DOCTYPE html>
<html lang="en"headmeta charset="UTF-8"title>Document</style>
    body{
        margin:0 auto;    
        background#abcdef;    
    }
    .box    
        width700px
        heighturl(source/pic.png) center no-repeat
        cursor pointer
        -webkit-transformrotate(0deg)
           -moz-transform
            -ms-transform
             -o-transform
                transform
        -webkit-transition-propertytransform
           -moz-transition-property
            -ms-transition-property
             -o-transition-property
                transition-property;
    
    .box:hover    
        -webkit-transformrotate(180deg)}
body>
    div class="box"></divhtml>

 

 transition-duration 动画持续时间

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out


        -webkit-transition-duration2s
           -moz-transition-duration
            -ms-transition-duration
             -o-transition-duration
                transition-duration 
        -webkit-transition-timing-functionlinear/*线性*/
           -moz-transition-timing-function
            -ms-transition-timing-function
             -o-transition-timing-function
                transition-timing-function   
        -webkit-transition-timing-functionease平滑    
        -webkit-transition-timing-functionease-in缓入ease-out缓出ease-in-out缓入缓出;        
    >

 

 transition-delay 过渡延迟

   
        -webkit-transition-delay1s
           -moz-transition-delay
            -ms-transition-delay
             -o-transition-delay
                transition-delay;           
    >

 

 transtion简写

transition: property  duration  timing-function  delay


        -webkit-transitiontransform 2s ease-in-out 1s
           -moz-transition
            -ms-transition
             -o-transition
                transition;  
    >

 

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型&#160;...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...