iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 14
0
自我挑戰組

CSS 大全(第四版)閱讀筆記系列 第 14

Day14【主題三:動畫】_animation縮寫 / 動畫權重與優先順序

  • 分享至 

  • xImage
  •  
  1. animation屬性:
  • 用一連串空白分隔對應動畫屬性;也可以用逗號分隔設定個別動畫。
  • 如果沒有在縮寫屬性中列出全部的八個數值,未宣告的部分會採用預設值,預設值如下:
    animation-name:none;
    animation-duration:0s;
    animation-timing-function:ease;
    animation-delay:0;
    animation-iteration-count:1;
    animation-fill-mode:none;
    animation-direction:normal;
    animation-play-state:running;
  • 不要用任何與動畫屬性有關的關鍵字命名animation-name,因為縮寫動畫的關鍵字會先檢查是否是動畫屬性的合法數值

2. 動畫權重與優先順序

  • 動畫會覆蓋所有一般規則,但會被!important規則覆蓋
  • 建議不要在宣告動畫區塊裡加上important
  • 如果元素的display屬性設定為none,任何作用在該元素或後代元素的動畫循環都會消失。將display值更新回可見狀態就會在次附加上動畫效果,讓動畫「重新」開始播放。

上一篇
Day13【主題三:動畫】_讓元素動起來
下一篇
Day15【主題四:css表格排版】_前言 / 表格格式化
系列文
CSS 大全(第四版)閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言