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

-Advertisement-

css3過渡 transition 相容性：IE10+ transition: none | all | property 預設為none all 表示所有屬性過渡 property 指定屬性值，如color opacity <!DOCTYPE html> <html lang="en"> <hea ...

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>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

分享一下我在mysql5.6+mysql8資料庫安裝過程中的一些坑！

Mysql5.6安裝下載好安裝包後，在bin目錄下用cmd打開，輸入mysqld install 【服務名】新建個服務在windows+r輸入services.msc即可查看服務怎樣使用mysql 在本地電腦上安裝好mysql伺服器後，使用命令開啟mysql服務，命令為net start my ...
關於mac下redis的安裝和部署

近來學習scrap分散式，需要用到redis，但以前沒接觸過，所以記錄一下自己的安裝過程。準備：Mac，redis-5.0.4.tar.gz 1.壓縮包到官網下（建議下載穩定版）網址：redis.io 2.我把壓縮包放在了/usr/local/下麵。 3.打開終端，找到壓縮包，在當前目錄下輸入：t ...
關於Queries_per_sec 性能計數器

【問題描述】 Queries_per_sec (QPS)是資料庫兩個比較重要的性能計數器指標。我們經常要求開發告知這個參數，以評估資料庫的一個負載情況。下麵的這段代碼連上伺服器，做一個簡單的查詢: using (MySqlConnection conn = new MySqlConnection() ...
什麼是Druid

一、Druid是什麼 Druid 單詞來源於西方古羅馬的神話人物，中文常常翻譯成德魯伊。玩過魔獸世界，暗黑破壞神，Dota，爐石傳說，Dota自走棋的朋友，對這個詞一定不陌生。本文中所介紹的Druid是一個分散式的支持實時分析的數據存儲系統。通俗一點：高性能實時分析資料庫。它由美國廣告技術公司M ...
iOS編程實戰 — 新的UI範式

iOS 7給蘋果設備帶來了全新的用戶界面（UI）。iOS 7在UI上的變化是自其誕生以來最大的。iOS 7專註於三個重要的特點：清晰、依從和層次。理解這三個特點很重要，因為這有助於設計跟原生的系統內置應用一樣的應用。本章將介紹iOS 7引入的一些重要變化以及如何讓應用使用這些新特性。前半章展示開發 ...
Android-ServiceManager

ServiceManager在init進程啟動之後啟動，用來管理系統中的service，那麼首先理解一下在init進程啟動之後啟動這句話類：一般開機過程分為三個階段： 1. OS級別，由bootloader載入linux內核後，內核開始初始化，並載入built in的驅動程式，內核完成開機後，載入 ...
JavaScript語法規則+JavaScript數據類型

JavaScript: ECMAScript + BOM +DOM javascript 標識符命名規則： 1、只能是字母、數字、下劃線、$ 2、不能以數字開頭 3、不能使用關鍵字和保留字省略var 聲明的變數是全局變數，但是不推薦這種方法 <!DOCTYPE html> <html lang=" ...
css3使用animation屬性實現炫酷效果

animation-name 動畫名稱，可以有多個值，用逗號隔開，表示綁定了多個動畫 animation-name屬性為動畫指定一個名稱 animation-name相容主流的瀏覽器，不過還是需要加首碼去相容 animation-name有兩個屬性值，分別是keyframename和none <!D ...