css3 animation 動畫

阿新 • • 發佈：2020-12-15

瞭解:https://www.cnblogs.com/xiaohuochai/p/5347930.html
幀動畫原理:https://www.bilibili.com/video/av12463881/

01-過渡詳解

  <style>
    .box {
      width: 300px;
      height: 300px;
      background-color: red;
      margin: 100px auto;
      /*
        過渡: 從A狀態到B狀態改變的過程 

        第一個值: all  需要過渡的屬性值  all 代表 所有的屬性都參與過渡
        第二個值: 過渡的持續時間  單位是s或者ms  1s = 1000ms
        第三個值: 過渡的延遲時間  單位是s或者ms  1s = 1000ms
        第四個值: 過渡的速度曲線 ease 預設值   linear勻速
      */ 

      /* transition: all 1s 0s cubic-bezier(1, -1.06, 0.1, 3.14); */

      /* transition: width 1s, height 2s, background-color 3s; */

      /*
        小結:
        1. 過渡的屬性  什麼屬性發生了過渡就寫什麼屬性  可以使用all表示任何屬性發生改變都參與過渡
        2. 過渡的持續時間  單位是m或者ms   1s = 1000ms
        3. 過渡的延遲時間  但是是m或者ms   注意: 第一個時間一定代表持續時間
        4. 過渡的速率曲線
          linear 勻速
          ease 盪鞦韆
          ...
          cubic-bezier()
      */ 

    }
    /* .box:nth-child(2) {
      transition: all 1s 0s ease;
    } */

    .box:hover {
      width: 600px;
      height: 600px;
      background-color: lime;
    }
  </style>
  <div class="box"></div>
  <div class="box"></div>

02-過渡屬性的單一寫法

 <style> 

    .box {
      width: 200px;
      height: 200px;
      background-color: red;
      /* 過渡的屬性 */
      transition-property: all;
      /* 過渡的持續時間 */
      transition-duration: 1s;
      /* 過渡的延遲時間 */
      transition-delay: 1s;
      /* 過渡的速率曲線 */
      transition-timing-function: linear;


      /* 一般單一屬性的寫法使用的較少  可以用於覆蓋簡寫裡面的某一個屬性 */
    }

    .box:hover {
      width: 300px;
      height: 300px;
      background-color: lime;
    }
  </style>
  <div class="box"></div>

03-動畫的八大引數

<style>
    .box {
      width: 200px;
      height: 200px;
      background-color: pink;
      position: absolute;
      left: 0;
      top: 0;
      /* 呼叫動畫 */

      /*
        動畫有八個引數
        1. 動畫的名稱
        2. 動畫的持續時間
        3. 動畫的速率曲線
        4. 動畫的延遲時間
        5. 動畫的執行次數 預設是一次 想要多少次就寫數值幾  特殊值: infinite 無限迴圈
        6. 動畫正逆序播放 normal 正序播放   reverse 倒敘播放  alternate 交替執行
        7. 動畫結束的狀態 動畫執行完畢預設會回到最開始的位置  forwards: 讓動畫停留在結束狀態
        8. 動畫的執行狀態 running 動畫正在執行  paused 動畫暫停 (一般用在當用戶做了某一個操作的時候將正在執行的動畫暫停)
      */
      animation: go 1s linear 0s alternate forwards paused;
    }

    /* 宣告動畫 */
    @keyframes go {
      0% {
        left: 0;
        top: 0;
      }

      25% {
        left: 800px;
        top: 0;
      }

      50% {
        left: 800px;
        top: 400px;
      }

      75% {
        left: 0px;
        top: 400px;
      }

      100% {
        left: 0;
        top: 200px;
      }
    }
  </style>
  <div class="box"></div>

06-動畫的單一屬性寫法

	<body>
  <!-- 
    animation-name:動畫名稱，由@keyframes定義的
    animation-duration：動畫的持續時間
    animation-timing-function：動畫的過渡型別  
        ease：變速
        linear：勻速
        steps：分步動畫
    animation-delay：動畫的延遲時間
    animation-iteration-count：動畫的迴圈次數  
      infinite:無窮次
    animation-direction：設定動畫在迴圈中是否反向運動 
        normal：從from到to
        reverse: 從to到from
        alternate: 交替執行
    animation-fill-mode：設定動畫時間之外的狀態   
      forwards：停留在結束狀態
    animation-play-state:設定動畫的狀態。
      paused: 暫停動畫 
  -->
</body>

09-幀動畫

  /* 讓動畫以步數去完成 幀動畫*/
  <style>
    .box {
      width: 174px;
      height: 126px;
      background: url(imag![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201215005918514.png#pic_center)
es/fish-12-126.png) 0 -1386px no-repeat;
      /* steps的取值是總的畫面數 - 1  因為預設情況下就可以看到第一個畫面  */
      animation: yao 1s steps(11) infinite;


      /* 
      幀動畫的使用步驟:
      1. 先確定一個畫面的大小 將這個大小作為盒子的大小
      2. 確定動畫的起始畫面和結束畫面
      3. 確定一共有多少個畫面 steps的取值是總的畫面數 - 1 
      */
    }

    @keyframes yao {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: 0 -1386px;
      }
    }
  </style>
  <div class="box"></div>

下面這個圖是幀動畫的圖

css3 animation動畫，你會用了嗎？ -cyy

animation關鍵幀使用介紹： <!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\">

css3 animation 動畫

技術標籤：css部分cssanimation 瞭解:https://www.cnblogs.com/xiaohuochai/p/5347930.html 幀動畫原理:https://www.bilibili.com/video/av12463881/

動畫(CSS3) animation

動畫是CSS3中具有顛覆性的特徵之一，可通過設定多個節點來精確控制一個或一組動畫，常用來實現複雜的動畫效果。

css3基礎---animation動畫

關鍵幀@keyframes 語法：@keyframes animiationName{keyframes-selector{css-style;}}animiationName:必寫項，定義動畫的名稱 keyframes-selector：必寫項，動畫持續時間的百分比from：0%to：100% css-style：css宣