閱讀(12.5k) 書(shū)簽贊(7) 我要糾錯(cuò)

CSS3 動(dòng)畫(huà)

2018-10-27 11:49 更新

我們可以使用CSS動(dòng)畫(huà)動(dòng)畫(huà)轉(zhuǎn)換從一個(gè)CSS樣式配置到另一個(gè)。

動(dòng)畫(huà)由三部分組成：

一個(gè)描述CSS動(dòng)畫(huà)的樣式
一組指示動(dòng)畫(huà)樣式的開(kāi)始和結(jié)束狀態(tài)的關(guān)鍵幀
可能的中途航點(diǎn)。

配置動(dòng)畫(huà)

要?jiǎng)?chuàng)建CSS動(dòng)畫(huà)序列，我們使用動(dòng)畫(huà)縮寫(xiě)屬性或其他動(dòng)畫(huà)相關(guān)屬性對(duì)元素進(jìn)行樣式化。

我們可以配置動(dòng)畫(huà)的時(shí)間和持續(xù)時(shí)間，以及動(dòng)畫(huà)序列應(yīng)該如何進(jìn)展的其他細(xì)節(jié)。

動(dòng)畫(huà)的實(shí)際外觀(guān)是使用 @keyframes 規(guī)則完成的。

下表列出了 @keyframes 規(guī)則和所有動(dòng)畫(huà)屬性：

@keyframes - 配置動(dòng)畫(huà)
animation - 設(shè)置所有動(dòng)畫(huà)屬性的縮寫(xiě)屬性，除了animation-play-state和animation-fill-mode屬性
animation-delay - 當(dāng)動(dòng)畫(huà)開(kāi)始時(shí)設(shè)置
animation-direction - 設(shè)置動(dòng)畫(huà)是否應(yīng)該在交替循環(huán)中反向播放
animation-duration - 設(shè)置動(dòng)畫(huà)完成一個(gè)周期所需的秒數(shù)或毫秒數(shù)
animation-fill-mode - 設(shè)置當(dāng)動(dòng)畫(huà)完成或延遲時(shí)使用的樣式
animation-iteration-count - 設(shè)置動(dòng)畫(huà)播放的次數(shù)
animation-name - 設(shè)置@keyframes動(dòng)畫(huà)的名稱(chēng)
animation-play-state - 設(shè)置動(dòng)畫(huà)是否正在運(yùn)行或暫停
animation-timing-function - 設(shè)置動(dòng)畫(huà)的速度曲線(xiàn)

例子

此示例顯示如何使用CSS動(dòng)畫(huà)來(lái)創(chuàng)建 H1 元素在頁(yè)面上移動(dòng)。

<!doctype html>
<html>
<head>
  <style type="text/css">
    h1 {
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
    }    

    @-moz-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      to {
        margin-left:0%;
        width:100%;
      }
    }
    @-webkit-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }      

      to {
        margin-left:0%;
        width:100%;
      }
    }
  </style>
</head>
<body>
  <h1>Watch me move</h1>
</body>
</html>

例2

此示例顯示如何使用CSS動(dòng)畫(huà)來(lái)創(chuàng)建 H1 元素在頁(yè)面上移動(dòng)并放大文本大小。

<!doctype html>
<html>
<head>
  <title>CSS animations: Example 2</title>
  <style type="text/css">
    h1 {
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
    }    

    @-moz-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }      

      75% {
        font-size:300%;
        margin-left:25%;
        width:150%;
      }      

      to {
        margin-left:0%;
        width:100%;
      }
    }    

    @-webkit-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }      

      75% {
        font-size:300%;
        margin-left:25%;
        width:150%;
      }      

      to {
        margin-left:0%;
        width:100%;
      }
    }
  </style>
</head>
<body>
  <h1>Watch me move</h1>

</body>
</html>

制作重復(fù)的動(dòng)畫(huà)

為了使動(dòng)畫(huà)重復(fù)，請(qǐng)使用 animation-iteration-count 屬性以指示重復(fù)動(dòng)畫(huà)的次數(shù)。

以下代碼使用infinite使動(dòng)畫(huà)重復(fù)無(wú)限：


<!doctype html>
<html>
<head>
  <title>CSS animations: Example 3</title>
  <style type="text/css">
    h1 {
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
      -moz-animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
    }
    
    @-moz-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      75% {
        font-size:300%;
        margin-left:25%;
        width:150%;
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }
    
    @-webkit-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      75% {
        font-size:300%;
        margin-left:25%;
        width:150%;
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }

  </style>
</head>
<body>
  <h1>Watch me move</h1>
</body>
</html>

上面的代碼呈現(xiàn)如下：

重復(fù)的動(dòng)畫(huà)

來(lái)回移動(dòng)

要在屏幕上來(lái)回移動(dòng)，我們可以將 animation-direction 設(shè)置為 alternate 。


<!doctype html>
<html>
<head>
  <title>CSS animations: Example 4</title>
  <style type="text/css">
    h1 {
      -moz-animation-duration: 3s;
      -webkit-animation-duration: 3s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
      -moz-animation-iteration-count: infinite;
      -webkit-animation-iteration-count: infinite;
      -moz-animation-direction: alternate;
      -webkit-animation-direction: alternate;
    }
    
    @-moz-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      75% {
        font-size:300%;
        margin-left:25%;
        width:150%;
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }
    
    @-webkit-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      75% {
        font-size:300%;
        margin-left:25%;
        width:150%;
      }
      
      to {
        margin-left:0%;
        width:100%;
      }
    }

  </style>
</head>
<body>
  <h1>Watch me move</h1>
</body>
</html>

上面的代碼呈現(xiàn)如下：

來(lái)回移動(dòng)

屬性	描述	描述...
animation-delay	動(dòng)畫(huà)開(kāi)始時(shí)設(shè)置	3
animation-direction	在交替循環(huán)上反向播放動(dòng)畫(huà)	3
animation-duration	在一個(gè)周期中為動(dòng)畫(huà)設(shè)置持續(xù)時(shí)間(秒)或毫秒(ms)	3
animation-fill-mode	設(shè)置動(dòng)畫(huà)使用的值不播放	3
animation-iteration-count	設(shè)置播放動(dòng)畫(huà)的次數(shù)	3
animation-name	設(shè)置@keyframes動(dòng)畫(huà)的名稱(chēng)	3
animation-play-state	運(yùn)行或暫停動(dòng)畫(huà)	3
animation-timing-function	設(shè)置動(dòng)畫(huà)的速度曲線(xiàn)	3
animation	所有動(dòng)畫(huà)屬性的速記屬性	3
@keyframes	創(chuàng)建動(dòng)畫(huà)的關(guān)鍵幀	3

CSS3 動(dòng)畫(huà)

配置動(dòng)畫(huà)

例子

例2

制作重復(fù)的動(dòng)畫(huà)

來(lái)回移動(dòng)

相關(guān)屬性

推薦文章

推薦教程

推薦課程