響應式網頁前端整合設計講義 TS-RWD-handout

1-12. CSS 範例再練習 (依需求挑選學習)

CSS3 animation 動畫

版本	屬性	說明
3	@keyframes	設計動畫時, 得先安排動畫時間內樣式變化的屬性內容。參考【英文版】【英文版】【簡中版】【簡中版】
3	animation	設計執行動畫。參考【英文版】【英文版】【簡中版】【簡中版】
3	animation-name	執行的動畫名稱, 也就是 @keyframes 的名稱。參考【英文版】【簡中版】
3	animation-duration	執行動畫的持續時間。參考【英文版】【簡中版】
3	animation-delay	執行動畫前的延遲時間。參考【英文版】【簡中版】
3	animation-direction	執行動畫的時間軸方向。參考【英文版】【簡中版】
3	animation-iteration-count	執行動畫的反覆次數, 設定 infinite 表示持續不斷的反覆執行。參考【英文版】【簡中版】

針對藍色區塊測試各種 animation 動畫

animation

延遲2秒後以每秒鐘換顏色 ( 淡藍 > 紅 > 綠 > 藍 > 淡藍 ), 連續換3輪顏色後停止。

      #b2 { animation-name: testAni1; 
            animation-delay: 2s; 
            animation-duration: 4s; 
            animation-iteration-count: 3; }

      @keyframes testAni1 {
          0%   {  }
          25%  { background-color: red; 
          50%  { background-color: green; }
          75%  { background-color: blue; }
          100% {  }
      }

延遲1秒後以每2秒鐘鐘擺的方式晃動1次, 持續不停止。

      #b2 { transform-origin: 0 0; 
            animation: testAni2 2s 1s infinite; }

      @keyframes testAni2 {
        0%   { transform: rotate(15deg); }
        50%  { transform: rotate(75deg); }
        100% { transform: rotate(15deg); }
      }

當滑鼠滑入時, 會呈現放大閃爍的紅色光暈。

      #b2:hover { cursor: pointer;
                  animation: testAni3 1s infinite; }

      @keyframes testAni3 {
        50% { box-shadow: 0 0 20px red; }
      }