【CSS】過渡、動畫和變換

時間  2019-11-20
標籤 CSS 過渡 動畫 變換 欄目 CSS 简体版
原文   原文鏈接

1. 使用過渡css

過渡效果通常是由瀏覽器直接改變元素的CSS屬性實現的。例如，若是使用:hover選擇器，一旦用戶將鼠標懸停在元素之上，瀏覽器就會應用跟選擇器關聯的屬性。html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        p { padding: 5px; border: medium double black; background-color: lightgray; font-family: sans-serif;} #banana { font-size: large; border: medium solid green;} #banana:hover { font-size: x-large; border: medium solid white; background-color: #1fa6e6; color: white; padding: 4px;}
    </style>
</head>
<body>
        <p>
            There are lots of different kinds of fruit - there are over 500 varieties of <span id="banana">banana</span> alone.
            By the time we add the countless types of apples, oranges, and other well-know fruit, we are faced with thousands of choices.
        </p>
</div>
</body>
</html>

當用戶將鼠標懸停在span元素上的時候，瀏覽器就會響應，直接應用新的屬性。變化以下圖所示：web

CCS過渡屬性容許控制應用新屬性值的速度。好比能夠選擇逐漸改變示例中span元素的外觀，讓鼠標移到單詞banana上的效果更和諧。瀏覽器

 

transition-delay 和 transition-duration 屬性指定爲CSS時間，是一個數字，單位爲ms（毫秒）或者s（秒）。app

transition簡寫屬性的格式以下： less

transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>

修改前面示例的CSS代碼以下：函數

p { padding: 5px; border: medium double black; background-color: lightgray; font-family: sans-serif;}
#banana { font-size: large; border: medium solid green;}
#banana:hover {
    font-size: x-large; border: medium solid white; background-color: #1fa6e6; color: white; padding: 4px; transition-delay: 100ms; transition-property: background-color,color,padding,font-size,border; transition-duration: 500ms;
}

在這個例子中，爲樣式添加了過渡，是經過#banana:hover 選擇器應用的。過渡會在用戶將鼠標懸停在span元素上100ms以後開始，持續時間爲500ms，過渡應用到 background-color、color、padding、font-size和border屬性。下面的效果圖展現了這個過渡的漸進過程：佈局

注意這個示例中指定多個屬性的方式。過渡屬性的值用逗號隔開，這樣過渡效果纔會同時出現。能夠爲延遲時間和持續時間指定多個值，它表明的意思是不一樣的屬性在不一樣的時間點開始過渡，且持續時間也不一樣。動畫

 

1.1 建立反向過渡ui

過渡只有在應用與其關聯的樣式時纔會生效。示例樣式中使用了:hover 選擇器，這意味着只有用戶將鼠標懸停在span元素上纔會應用樣式。用戶一旦將鼠標從span元素上已開，只剩下#banana樣式，默認狀況下，元素的外觀會馬上回到初始狀態。

由於這個緣由，大多數過渡成對出現：暫時狀態的過渡和方向相反的反向過渡。修改前面示例的CCS代碼，從而展現如何經過應用另外一種過渡樣式平滑地返回初始樣式。

p { padding: 5px; border: medium double black; background-color: lightgray; font-family: sans-serif;}
#banana {
    font-size: large; border: medium solid green; transition-delay: 100ms; transition-duration: 500ms;}
#banana:hover {
    font-size: x-large; border: medium solid white; background-color: #1fa6e6; color: white; padding: 4px;
    transition-delay: 100ms;
    transition-property: background-color,color,padding,font-size,border;
    transition-duration: 500ms;
}

1.2 選擇中間值的計算方式

使用過渡時，瀏覽器須要爲每一個屬性計算初始值和最終值之間的中間值。使用transition-timing-function 屬性指定計算中間值的方式，表示爲四個點控制的三次貝塞爾曲線。有五種預設曲線能夠選擇，由下面的值表示：

* ease（默認值）

* linear

* ease-in

* ease-out

* ease-in-out

從下圖能夠看到這五種曲線，它們展現了中間值隨着時間的推移變爲最終值的速率。

搞清楚這些值最簡單的辦法就是在本身的HTML文檔中試驗。還有另一個值 cubic-bezier，可用來指定自定義曲線。

修改前面示例的CSS樣式以下，展現 transition-timing-function 屬性的應用：

p { padding: 5px; border: medium double black; background-color: lightgray; font-family: sans-serif;}
#banana {
    font-size: large; border: medium solid green;
    transition-delay: 10ms;
    transition-duration: 250ms;;
}
#banana:hover {
    font-size: x-large; border: medium solid white; background-color: #1fa6e6; color: white; padding: 4px;
    transition-delay: 100ms;
    transition-property: background-color,color,padding,font-size,border;
    transition-duration: 500ms; transition-timing-function: linear;
}

 

2. 使用動畫

CSS動畫本質上是加強的過渡。在如何從一種樣式過渡到另外一種樣式的過程當中，具備了更多選擇、更多控制，以及更多靈活性。

animation 簡寫屬性的格式以下：

animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count>

注意，這些屬性都不是用來指定要做爲動畫的CSS屬性的。這是由於動畫是在兩部分定義的。第一部分包含在樣式聲明中，使用了上面表中列出的屬性。它們定義了動畫的樣式，但並無定義哪些屬性是動畫。第二部分使用@key-frames規則窗口，用來定義定義動畫的屬性。從下面代碼中能夠看到定義動畫的這兩部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        #ball{
            width: 180px; height: 180px; background-color:green; margin:20px auto;border-radius: 90px; -webkit-animation-delay: 100ms; -webkit-animation-duration: 2000ms; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; -webkit-animation-name:'GrowQuare';
        } @-webkit-keyframes GrowQuare { to { background-color: yellow; border-radius: 0; } } </style>
</head>
<body>
<div id="ball"></div>
</body>
</html>

要明白在這個示例中作了什麼，應該仔細研究一下動畫的兩部分。第一部分是在樣式中定義動畫屬性，是跟#ball選擇器一塊兒的。先看看基本屬性：選擇器樣式應用100ms後開始播放動畫屬性，持續時間2000ms，無限重複播放，中間值使用linear函數計算。除了重複播放動畫，這些屬性在過渡中都有對應屬性。

這些基本的屬性並無指出爲哪些CSS屬性應用動畫。爲此，要使用 animation-name 屬性給動畫屬性起個名字，這裏叫 GrowsQuare 。這樣，就至關於告訴瀏覽器找一組名爲 GrowQuare 的關鍵幀，而後將這些基本屬性的值應用到 @keyframes指定的動畫屬性上。下面是此例代碼中關鍵幀的聲明（這裏省略了-webkit前綴）：

@-webkit-keyframes GrowQuare {
     to {
         background-color: yellow;
         border-radius: 0;
     }
 }

聲明的開始是@keyframes，接着指定了這組關鍵幀的名字 GrowQuare。聲明內部指定了一組要應用的動畫效果。to 聲明定義了一組設置動畫樣式的屬性，同時也定義了動畫結束時這些屬性的最終值。動畫的初始值來自進行動畫處理的元素在應用樣式以前的屬性值。

此例的效果是一個大小爲180像素的圓形，漸變成正方形。其顯示效果以下圖所示：

 

2.1 使用關鍵幀

CSS動畫的關鍵幀機器靈活，很是值得研究。

(1) 設置初始狀態

在前面的示例中，要處理爲動畫的屬性的初始值來自元素自身。可使用from子句指定另外一組值。修改前面示例的CSS文件以下：

#ball{
    width: 180px; height: 180px; background-color:green; margin:20px auto;border-radius: 90px; -webkit-animation-delay: 1000ms;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name:'GrowQuare';
}
@-webkit-keyframes GrowQuare { from { background-color: black; width: 90px; height: 180px; border-radius: 45px/90px; }
    to {
        background-color: yellow;
        border-radius: 0;
    }
}

在這個例子中修改了動畫延遲爲1000ms，併爲背景色、寬度、高度、圓角邊框屬性提供了初始值，在to句子中指定的其餘屬性在動畫開始時的初始值來自元素自身。從下面的顯示效果能夠看出來。最開始是一個綠色的圓形，而後一秒後直接變成一個豎立的黑色橢圓，再通過兩秒逐漸改變成黃色的正方形。

(2) 指定中間關鍵幀

也能夠添加其餘關鍵幀定義動畫的中間階段。這是經過添加百分數子句實現的，修改前面示例CSS代碼以下：

#ball{ width: 200px; height: 200px; background-color:green; margin:20px auto;border-radius: 100px;
    -webkit-animation-delay: 1000ms;
    -webkit-animation-duration: 2000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name:'GrowQuare';
}
@-webkit-keyframes GrowQuare { from { background-color: black; width: 100px; height: 200px; border-radius: 50px/100px; } 50% { background-color: red; width: 50px;height: 100px; border-radius: 25px/50px;margin:70px auto; } 75%{ background: blue; width: 25px;height: 50px; border-radius: 12.5px/25px;margin:95px auto; }
    to {
        background-color: yellow;
        border-radius: 0;
    }
}

對於每個百分數子句，在動畫中定義了一個點，這時子句中指定的屬性和值會徹底應用到樣式上。此例中，定義了50%和75子句。

中關鍵幀有兩個用途。一是爲屬性定義新的變化速率。瀏覽器會使用animation-timing-function 屬性指定的調速函數計算由一個關鍵幀移動到下一個關鍵幀須要的中間值，以確保關鍵幀與關鍵幀之間流暢地播放。二則是定義屬性值，以便建立更爲複雜的動畫。能夠看到此例顯示效果以下：

 

2.2 設置重複方向

動畫結束後瀏覽器能夠選擇接下來動畫以何種方式重複。使用 animation-direction屬性指定首先方式。

修改前面示例CSS代碼以下：

#ball{
    width: 50px; height: 50px; background-color:green;border-radius: 25px;
    -webkit-animation-delay: 100ms;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 2;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name:'GrowQuare'; -webkit-animation-direction: alternate;
}
@-webkit-keyframes GrowQuare {
    50%{
        margin-top: 200px;
    }

    to {
        margin-left:200px;
    }
}

2.3 理解結束狀態

CSS動畫的一個侷限是關鍵幀爲屬性定義的值只能在動畫中應用。動畫結束後，動畫元素的外觀回到初始狀態。

 

2.4 初始佈局時應用動畫

 跟過渡相比，動畫的一個優點是能夠將其應用到頁面的初始佈局。當把 animation-delay 屬性的值設爲0 （默認值），當頁面一旦加載就會自動應用樣式，這就意味着瀏覽器一旦顯示HTML就有了動畫效果。

PS:使用上訴方法要謹慎。若是要在頁面中使用動畫，而動畫效果不是邀請用戶只需某一動做，這種狀況更應該慎之又慎。若是確實要使用動畫，要保證動畫效果緩和一些，不要妨礙用戶閱讀或者與頁面其餘部分交互。

 

2.5 重用關鍵幀

咱們能夠對同一組關鍵幀應用多個動畫，從而動畫屬性配置不一樣的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        #ball{
            width: 50px; height: 50px; background-color:green;border-radius: 25px;
            -webkit-animation-delay: 100ms;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear; -webkit-animation-name:'GrowQuare';
            -webkit-animation-direction: alternate;
        }
        #ball_second {
            width: 50px; height: 50px; background-color:green;
            -webkit-animation-delay: 100ms;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear; -webkit-animation-name:'GrowQuare';
            -webkit-animation-direction: alternate;
        }
        @-webkit-keyframes GrowQuare {
            to {
                margin-left:200px;
            }
        }
    </style>
</head>
<body>
<div id="ball"></div>
<div id="ball_second"></div>
</body>
</html>

代碼中展現了兩個樣式，它們都使用了GrowQuare 關鍵幀。效果圖以下：

 

2.6 爲多個元素應用多個動畫

前面例子的一個變體是爲多個元素應用同一個動畫。在包含動畫細節的樣式中，擴展選擇器的範圍便可實現這一點。

(1)爲多個元素應用一個動畫

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css"> #ball, #ball_second {
            width: 50px; height: 50px; background-color:green;border-radius: 25px;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name:'GrowQuare';
            -webkit-animation-direction: alternate;
        }
        @-webkit-keyframes GrowQuare {
            to {
                margin-left:200px;
            }
        }
    </style>
</head>
<body>
<div id="ball"></div>
<div id="ball_second"></div>
</body>
</html>

（2）爲一個元素應用多個關鍵幀

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        #ball{
            width: 50px; height: 50px; background-color:green;border-radius: 25px;
            -webkit-animation-delay: 500ms;
            -webkit-animation-duration: 2s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear; -webkit-animation-name:'Grow1','Grow2';
            -webkit-animation-direction: alternate;
        }
        @-webkit-keyframes Grow1 {
            to {
                margin-left:200px;
            }
        }
        @-webkit-keyframes Grow2 {
            to {
                margin-top:200px;
            }
        }
    </style>
</head>
<body>
<div id="ball"></div>
</body>
</html>

2.7 中止和啓動動畫

aniamation-play-state 屬性能夠用來中止和啓動動畫。若是這個屬性的值爲paused，動畫就會中止。若是換成 playing。動畫就會開始播放。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        #ball {
            width: 50px; height: 50px; background-color:red;border-radius: 25px;
            -webkit-animation-delay: 500ms;
            -webkit-animation-duration: 5s;
            -webkit-animation-direction: alternate;
            -webkit-animation-iteration-count: infinite;;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name:'GrowQuare';
        }
        @-webkit-keyframes GrowQuare {
            to {
                width:200px;
            }
        }
    </style>
</head>
<body>
<div id="ball"></div>
<br />
<div>
    <button>Running</button>
    <button>Paused</button>
</div>
<script>
    var buttons = document.getElementsByTagName("button");
    for(var i = 0; i < buttons.length; i++){
        buttons[i].onclick = function(e){
            document.getElementById("ball").style.webkitAnimationPlayState = e.target.innerHTML;
        }
    }
</script>
</body>
</html>

 

3. 使用變換

咱們可使用CSS變換爲元素應用線性變換，也就是說能夠旋轉、縮放、傾斜和平移某個元素。

 

3.1 應用變換

 

下面代碼是一個變換的例子。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        img{ border: medium double green; background-color: lightgray;}
        #banana2 { transform: rotate(-45deg) scaleX(1.2);
        }
    </style>
</head>
<body>
<p>
<img src="imgs/banana-small.png" alt="small banana" id="banana1"></p>
<p>
<img src="imgs/banana-small.png" alt="small banana" id="banana2"></p>
</body>
</html>

 

此例中，爲#banana2 選擇器添加了一個transform 屬性聲明，指定了兩個變換。第一個是旋轉-45°（即逆時針旋轉45°）；第二個是沿x軸進行因子爲1.2的縮放。這些變換的效果以下圖所示：

 

3.2 指定元素變換的起點

transform-origin屬性容許咱們指定應用變換的起點。默認狀況下，使用元素的中心做爲起點，不過，可使用下表中的值選擇其餘起點。

要定義起點，須要爲x軸和y軸各定義一個值。若是隻提供一個值，另外一個值會被認爲是中心位置。下面代碼展現了 transform-origin屬性的用法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        img{ border: medium double green; background-color: lightgray;}
        #banana2 {
            transform: rotate(-45deg) scaleX(1.2); transform-origin: right top;}
    </style>
</head>
<body>
<p>
<img src="imgs/banana-small.png" alt="small banana" id="banana1"></p>
<p>
<img src="imgs/banana-small.png" alt="small banana" id="banana2"></p>
</body>
</html>

此例中，將變換的起點已到了元素的右上角，從下面的顯示效果圖能夠看到：

 

3.3 將變換做爲動畫和過渡處理

咱們能夠爲變換應用動畫和過渡，就和其餘CSS屬性同樣。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        img{ border: medium double green; background-color: lightgray;} #banana2:hover { transform: rotate(360deg); transition-duration: 5s; }
    </style>
</head>
<body>
<p>
<img src="imgs/banana-small.png" alt="small banana" id="banana1"></p>
<p>
<img src="imgs/banana-small.png" alt="small banana" id="banana2"></p>
</body>
</html>

此例中，定義了一個過渡，它會通過5秒完成一次360°旋轉變換。當用戶將鼠標懸停在 #banana2 元素上，就會應用過渡，效果以下圖所示：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程