閱讀(12.6k) 書簽贊(7) 我要糾錯(cuò)

CSS3 動(dòng)畫

2018-10-27 11:49 更新

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

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

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

配置動(dòng)畫

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

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

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

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

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

例子

此示例顯示如何使用CSS動(dòng)畫來創(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)畫來創(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)畫

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

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


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

來回移動(dòng)

要在屏幕上來回移動(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)如下：

來回移動(dòng)

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

CSS3 動(dòng)畫

配置動(dòng)畫

例子

例2

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

來回移動(dòng)

相關(guān)屬性

推薦文章

推薦教程

推薦課程