經過CSS3屬性值的變化實現動畫效果+觸發這些動畫產生交互

時間 2020-02-04

標籤經過 css3 css 屬性變化實現動畫效果觸發這些產生交互欄目 CSS 简体版

原文原文鏈接

css3過渡css

transitionhtml

兼容性：IE10+css3

transition: none | all | propertyweb

默認爲none動畫

all 表示全部屬性過渡url

property 指定屬性值，如color opacityspa

<!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 動畫持續時間3d

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

<!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 過渡延遲orm

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。