CSS（18）CSS3 過渡與動畫

阿新 • • 發佈：2022-05-13

一、CSS3 過渡:transition

CSS3中，我們為了新增某種效果可以從一種樣式轉變到另一個的時候，無需使用Flash動畫或JavaScript。

IE10及以上瀏覽器支援。

1、它是如何工作？

CSS3 過渡是元素從一種樣式逐漸改變為另一種的效果。

要實現這一點，必須規定兩項內容：

指定要新增效果的CSS屬性
指定效果的持續時間。

應用於寬度屬性的過渡效果，時長為 2 秒：

    div
    {
        transition: width 2s;
        -webkit-transition: width 2s; /* Safari */
    }

注意： 如果未指定的期限，transition將沒有任何效果，因為預設值是0。

指定的CSS屬性的值更改時效果會發生變化。一個典型CSS屬性的變化是使用者滑鼠放在一個元素上時：

規定當滑鼠指標懸浮(:hover)於

元素上時：

    div:hover
    {
        width:300px;
    }

嘗試一下 »

注意： 當滑鼠游標移動到該元素時，它逐漸改變它原有樣式

2、多項改變

要新增多個樣式的變換效果，新增的屬性由逗號分隔：

添加了寬度，高度和轉換效果：

    div
    {
        transition: width 2s, height 2s, transform 2s;
        -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    }

嘗試一下 »

3、過渡屬性

下表列出了所有的過渡屬性:

transition ：簡寫屬性，用於在一個屬性中設定四個過渡屬性。
transition-property ：規定應用過渡的 CSS 屬性的名稱。
transition-duration ：定義過渡效果花費的時間。預設是 0。
transition-timing-function ：規定過渡效果的時間曲線。預設是 "ease"。
transition-delay ：規定過渡效果何時開始。預設是 0。

下面的兩個例子設定所有過渡屬性：

在一個例子中使用所有過渡屬性：

    div
    {
        transition-property: width;
        transition-duration: 1s;
        transition-timing-function: linear;
        transition-delay: 2s;
        /* Safari */
        -webkit-transition-property:width;
        -webkit-transition-duration:1s;
        -webkit-transition-timing-function:linear;
        -webkit-transition-delay:2s;
    }

嘗試一下 »

與上面的例子相同的過渡效果，但是使用了簡寫的 transition 屬性：

    div
    {
        transition: width 1s linear 2s;
        /* Safari */
        -webkit-transition:width 1s linear 2s;
    }

嘗試一下 »

二、CSS3 動畫：animation

CSS3 可以建立動畫，它可以取代許多網頁動畫影象、Flash 動畫和 JavaScript 實現的效果。

1、CSS3 @keyframes 建立動畫

要建立 CSS3 動畫，你需要了解 @keyframes 規則。

@keyframes 規則是建立動畫。

@keyframes 規則內指定一個 CSS 樣式和動畫將逐步從目前的樣式更改為新的樣式。

IE10及以上瀏覽器支援。

    @keyframes myfirst
    {
        from {background: red;}
        to {background: yellow;}
    }
     
    @-webkit-keyframes myfirst /* Safari 與 Chrome */
    {
        from {background: red;}
        to {background: yellow;}
    }

2、CSS3 動畫繫結到選擇器

當在 @keyframes 建立動畫，把它繫結到一個選擇器，否則動畫不會有任何效果。

指定至少這兩個CSS3的動畫屬性綁定向一個選擇器：

規定動畫的名稱
規定動畫的時長

把 "myfirst" 動畫捆綁到 div 元素，時長：5 秒：

    div
    {
        animation: myfirst 5s;
        -webkit-animation: myfirst 5s; /* Safari 與 Chrome */
    }

嘗試一下 »

注意: 您必須定義動畫的名稱和動畫的持續時間。如果省略的持續時間，動畫將無法執行，因為預設值是0。

3、CSS3動畫是什麼？

動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。

您可以改變任意多的樣式任意多的次數。

請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。

0% 是動畫的開始，100% 是動畫的完成。

為了得到最佳的瀏覽器支援，您應該始終定義 0% 和 100% 選擇器。

當動畫為 25% 及 50% 時改變背景色，然後當動畫 100% 完成時再次改變：

    @keyframes myfirst
    {
        0%   {background: red;}
        25%  {background: yellow;}
        50%  {background: blue;}
        100% {background: green;}
    }
     
    @-webkit-keyframes myfirst /* Safari 與 Chrome */
    {
        0%   {background: red;}
        25%  {background: yellow;}
        50%  {background: blue;}
        100% {background: green;}
    }

嘗試一下 »

改變背景色和位置：

    @keyframes myfirst
    {
        0%   {background: red; left:0px; top:0px;}
        25%  {background: yellow; left:200px; top:0px;}
        50%  {background: blue; left:200px; top:200px;}
        75%  {background: green; left:0px; top:200px;}
        100% {background: red; left:0px; top:0px;}
    }
     
    @-webkit-keyframes myfirst /* Safari 與 Chrome */
    {
        0%   {background: red; left:0px; top:0px;}
        25%  {background: yellow; left:200px; top:0px;}
        50%  {background: blue; left:200px; top:200px;}
        75%  {background: green; left:0px; top:200px;}
        100% {background: red; left:0px; top:0px;}
    }

嘗試一下 »

4、CSS3的動畫屬性

下面的表格列出了 @keyframes 規則和所有動畫屬性：

@keyframes ：規定動畫。
animation ：所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name ：規定 @keyframes 動畫的名稱。
animation-duration ：規定動畫完成一個週期所花費的秒或毫秒。預設是 0。
animation-timing-function ：規定動畫的速度曲線。預設是 "ease"。
animation-fill-mode ：規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。
animation-delay ：規定動畫何時開始。預設是 0。
animation-iteration-count ：規定動畫被播放的次數。預設是 1。
animation-direction ：規定動畫是否在下一週期逆向地播放。預設是 "normal"。
animation-play-state ：規定動畫是否正在執行或暫停。預設是 "running"。

下面兩個例子設定所有動畫屬性：

執行myfirst動畫，設定所有的屬性：

    div
    {
        animation-name: myfirst;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-delay: 2s;
        animation-iteration-count: infinite;
        animation-direction: alternate;
        animation-play-state: running;
        /* Safari 與 Chrome: */
        -webkit-animation-name: myfirst;
        -webkit-animation-duration: 5s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-delay: 2s;
        -webkit-animation-iteration-count: infinite;
        -webkit-animation-direction: alternate;
        -webkit-animation-play-state: running;
    }

嘗試一下 »

與上面的動畫相同，但是使用了簡寫的動畫 animation 屬性：

    div
    {
        animation: myfirst 5s linear 2s infinite alternate;
        /* Safari 與 Chrome: */
        -webkit-animation: myfirst 5s linear 2s infinite alternate;
    }

嘗試一下 »