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

2024-03-08 20:53:46

css3过渡

transition

兼容性：IE10+

transition: none | all | property

默认为none

all 表示所有属性过渡

property 指定属性值，如color opacity

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    body{
        margin:0 auto;    
        background:#abcdef;    
    }
    .box{    
        width:700px;
        height:700px;
        margin:0 auto;    
        background:url(source/pic.png) center no-repeat;
        cursor: pointer;
        -webkit-transform:rotate(0deg);
           -moz-transform:rotate(0deg);
            -ms-transform:rotate(0deg);
             -o-transform:rotate(0deg);
                transform:rotate(0deg);
        -webkit-transition-property:transform;
           -moz-transition-property:transform;
            -ms-transition-property:transform;
             -o-transition-property:transform;
                transition-property:transform;
    }
    .box:hover{    
        -webkit-transform:rotate(180deg);
           -moz-transform:rotate(180deg);
            -ms-transform:rotate(180deg);
             -o-transform:rotate(180deg);
                transform:rotate(180deg);
    }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

transition-duration 动画持续时间

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    body{
        margin:0 auto;    
        background:#abcdef;    
    }
    .box{    
        width:700px;
        height:700px;
        margin:0 auto;    
        background:url(source/pic.png) center no-repeat;
        cursor: pointer;
        -webkit-transform:rotate(0deg);
           -moz-transform:rotate(0deg);
            -ms-transform:rotate(0deg);
             -o-transform:rotate(0deg);
                transform:rotate(0deg);
        -webkit-transition-property:transform;
           -moz-transition-property:transform;
            -ms-transition-property:transform;
             -o-transition-property:transform;
                transition-property:transform;
        -webkit-transition-duration:2s;
           -moz-transition-duration:2s;
            -ms-transition-duration:2s;
             -o-transition-duration:2s;
                transition-duration:2s; 
        -webkit-transition-timing-function:linear;/*线性*/
           -moz-transition-timing-function:linear;
            -ms-transition-timing-function:linear;
             -o-transition-timing-function:linear;
                transition-timing-function:linear;   
        -webkit-transition-timing-function:ease;/*平滑*/
           -moz-transition-timing-function:ease;
            -ms-transition-timing-function:ease;
             -o-transition-timing-function:ease;
                transition-timing-function:ease;    
        -webkit-transition-timing-function:ease-in;/*缓入*/
           -moz-transition-timing-function:ease-in;
            -ms-transition-timing-function:ease-in;
             -o-transition-timing-function:ease-in;
                transition-timing-function:ease-in;    
        -webkit-transition-timing-function:ease-out;/*缓出*/
           -moz-transition-timing-function:ease-out;
            -ms-transition-timing-function:ease-out;
             -o-transition-timing-function:ease-out;
                transition-timing-function:ease-out;    
        -webkit-transition-timing-function:ease-in-out;/*缓入缓出*/
           -moz-transition-timing-function:ease-in-out;
            -ms-transition-timing-function:ease-in-out;
             -o-transition-timing-function:ease-in-out;
                transition-timing-function:ease-in-out;        
    }
    .box:hover{    
        -webkit-transform:rotate(180deg);
           -moz-transform:rotate(180deg);
            -ms-transform:rotate(180deg);
             -o-transform:rotate(180deg);
                transform:rotate(180deg);
    }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

transition-delay 过渡延迟

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    body{
        margin:0 auto;    
        background:#abcdef;    
    }
    .box{    
        width:700px;
        height:700px;
        margin:0 auto;    
        background:url(source/pic.png) center no-repeat;
        cursor: pointer;
        -webkit-transform:rotate(0deg);
           -moz-transform:rotate(0deg);
            -ms-transform:rotate(0deg);
             -o-transform:rotate(0deg);
                transform:rotate(0deg);
        -webkit-transition-property:transform;
           -moz-transition-property:transform;
            -ms-transition-property:transform;
             -o-transition-property:transform;
                transition-property:transform;
        -webkit-transition-duration:2s;
           -moz-transition-duration:2s;
            -ms-transition-duration:2s;
             -o-transition-duration:2s;
                transition-duration:2s;    
        -webkit-transition-timing-function:ease-in-out;/*缓入缓出*/
           -moz-transition-timing-function:ease-in-out;
            -ms-transition-timing-function:ease-in-out;
             -o-transition-timing-function:ease-in-out;
                transition-timing-function:ease-in-out;   
        -webkit-transition-delay:1s;
           -moz-transition-delay:1s;
            -ms-transition-delay:1s;
             -o-transition-delay:1s;
                transition-delay:1s;           
    }
    .box:hover{    
        -webkit-transform:rotate(180deg);
           -moz-transform:rotate(180deg);
            -ms-transform:rotate(180deg);
             -o-transform:rotate(180deg);
                transform:rotate(180deg);
    }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

transtion简写

transition: property duration timing-function delay

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
    body{
        margin:0 auto;    
        background:#abcdef;    
    }
    .box{    
        width:700px;
        height:700px;
        margin:0 auto;    
        background:url(source/pic.png) center no-repeat;
        cursor: pointer;
        -webkit-transform:rotate(0deg);
           -moz-transform:rotate(0deg);
            -ms-transform:rotate(0deg);
             -o-transform:rotate(0deg);
                transform:rotate(0deg);
        -webkit-transition:transform 2s ease-in-out 1s;
           -moz-transition:transform 2s ease-in-out 1s;
            -ms-transition:transform 2s ease-in-out 1s;
             -o-transition:transform 2s ease-in-out 1s;
                transition:transform 2s ease-in-out 1s;        
    }
    .box:hover{    
        -webkit-transform:rotate(180deg);
           -moz-transform:rotate(180deg);
            -ms-transform:rotate(180deg);
             -o-transform:rotate(180deg);
                transform:rotate(180deg);
        -webkit-transition:transform 2s ease-in-out 1s;
           -moz-transition:transform 2s ease-in-out 1s;
            -ms-transition:transform 2s ease-in-out 1s;
             -o-transition:transform 2s ease-in-out 1s;
                transition:transform 2s ease-in-out 1s;  
    }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

码农公寓

相关文章