閱讀(12.8k) 書簽贊(7) 我要糾錯

CSS3 動畫

2018-10-27 11:49 更新

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

動畫由三部分組成：

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

配置動畫

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

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

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

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

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

例子

此示例顯示如何使用CSS動畫來創(chuàng)建 H1 元素在頁面上移動。

<!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動畫來創(chuàng)建 H1 元素在頁面上移動并放大文本大小。

<!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ù)的動畫

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

以下代碼使用infinite使動畫重復(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ù)的動畫

來回移動

要在屏幕上來回移動，我們可以將 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)如下：

來回移動

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

CSS3 動畫

配置動畫

例子

例2

制作重復(fù)的動畫

來回移動

相關(guān)屬性

推薦文章

推薦教程

推薦課程