精品国产自在现线电影,非洲女人平均尺寸多大正常

技術(shù)頻道 - html技術(shù)

【實例】詳解 CSS3 animation 6個動畫屬性

作者:admin 時間:2022-3-16 13:26:29 瀏覽:

CSS3 animation 有6個動畫屬性：

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

其語法是

animation: name duration timing-function delay iteration-count direction;

關(guān)于各屬性的描述如下表所示

值	描述
animation-name	規(guī)定需要綁定到選擇器的 keyframe 名稱
animation-duration	規(guī)定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規(guī)定動畫的速度曲線。
animation-delay	規(guī)定在動畫開始之前的延遲。
animation-iteration-count	規(guī)定動畫應(yīng)該播放的次數(shù)。
animation-direction	規(guī)定是否應(yīng)該輪流反向播放動畫。

實例介紹

例如animation的語句如下：

animation: box_move 1s linear 2s alternate forwards;

那么各屬性值的解釋如下：

/* 1. 通過動畫集名稱調(diào)用動畫 */
animation-name: box_move;

/* 2.設(shè)置動畫執(zhí)行時間 */
animation-duration: 1s;

/* 3. 設(shè)置動畫的速度類型 */
animation-timing-function: linear;

/* 4. 設(shè)置延時執(zhí)行時間 */
animation-delay: 2s;

/* 5. 動畫默認執(zhí)行次數(shù)是1次, infinite: 無限次 */
animation-iteration-count: infinite; 

/* 6. 設(shè)置動畫逆播【動畫怎么正著播放，倒著播放的時候也是一樣的效果】 normal*/
animation-direction: alternate;

/* 7. 設(shè)置動畫執(zhí)行完后的一個狀態(tài): 讓動畫停在結(jié)束時候的狀態(tài) */
animation-fill-mode: forwards;

需要明白的是，box_move 是動畫名稱，即是動畫集名稱，通過動畫名稱調(diào)用動畫集，如下代碼：

@keyframes box_move {
  from {}
  to {}
}

通過以上書寫，一個完整的animation才算完整，也即是一個animation需包含兩部分，一部分是animation復(fù)合屬性語句，另一部分是動畫集代碼。

案例1：移動的盒子

案例效果：

1、盒子先水平向右移動100px，接下來向下移動100px。

2、然后向左移動100px，最后向上移動100px又回到原點。

3、其中每次改變方向都要變化背景顏色，循環(huán)往復(fù)執(zhí)行。

css3 animation 移動的盒子

demo download

完整HTML代碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      .box {
        width: 30px;
        height: 30px;
        background-color: blue;
        animation: move 8s linear infinite forwards;
      }
      @keyframes move {
        from {
        }
        25% {
          transform: translateX(100px);
          background-color: red;
        }
        50% {
          transform: translateX(100px) translateY(100px);
          background-color: green;
        }
        75% {
          transform: translateX(0px) translateY(100px);
          background-color: yellow;
        }
        to {
          transform: translateY(0px);
          background-color: blue;
        }
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

此案例中，animation語句為：animation: move 8s linear infinite forwards; 其中move是動畫集名稱，8s為動畫執(zhí)行時間，linear是動畫的速度類型（勻速），infinite表示運動無限循環(huán)，forwards表示動畫結(jié)束時保持狀態(tài)不變。

案例2：拋物線

css3 animation 拋物線

demo download

完整HTML代碼

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>

    <style>
      body {
        position: relative;         
        background:#eee;
      }
      .animation {
        margin:100px 100px;
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 25px;
        background-color: #ed3;
        animation: r 1.5s linear 0s infinite forwards,
          l 1.5s cubic-bezier(0, 0, 1, 0) 0s infinite forwards;
      }
      @keyframes r {
        from {
          left: 0;
        }
        to {
          left: 120px;
        }
      }
      @keyframes l {
        from {
          top: 0;
        }
        to {
          top: 340px;
        }
      }
    </style>
  </head>
  <body>
    <div class="animation"></div>
  </body>
</html>