CSS 資料型別 - <time-percentage>

CSS 資料型別 <time-percentage> 表示一個值，該值可以是 <time> 或 <percentage>。

語法

<time-percentage> = <time> | <percentage>

CSS <time> - 有效和無效百分比

以下是有效百分比的列表

百分比	描述
65%
+45%	加號。
-30%	並非所有接受百分比的屬性都接受負百分比。

以下是無效百分比的列表

百分比	描述
20 %	% 符號和數字之間不能有空格。

CSS <time> - 有效和無效時間

以下是有效時間的列表

時間	描述
19.6	正整數
-123ms	負整數。
2.6ms	非整數
10mS	雖然不需要使用大寫字母，但單位不區分大小寫。
+0s	帶單位和前導 + 的零
-0ms	零、單位和前導 -

以下是無效時間的列表

時間	描述
0	無單位的零對於 <time> 無效，但對於 <length> 有效。
14.0	這缺少一個單位，因此它是一個 <number> 而不是一個 <time>。
9 ms	數字和單位之間不允許有空格。

CSS <time-percentage> - 在 calc() 中使用的百分比

以下示例演示了在 calc() 函式中使用 <percentage> 資料型別，其中計算了元素的寬度。

<html>
<head>
<style>
   .percal {
      position: absolute;
      width: calc(100% - 140px);
      border: solid black 2px;
      background-color: teal;
      color: white;
      padding: 10px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="percal">
      <h1><percentage> datatype used in calc()</h1>
   </div>
</body>
</html>

CSS <time-percentage> - 在動畫中使用的時間

以下示例演示了在動畫中使用 <time> 資料型別，其中動畫持續時間以時間單位（即 10s）指定。

<html>
<head>
<style>
   .animated {
      width: 100px;
      height: 50px;
      background-color: purple;
      background-repeat: no-repeat;
      background-position: left top;
      padding-top: 95px;
      margin-bottom: 60px;
      -webkit-animation-duration: 10s;
      animation-duration: 10s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
   }
   
   @-webkit-keyframes pulse {
      0% { -webkit-transform: scale(1.5); }
      50% { -webkit-transform: scale(3.1); }
      100% { -webkit-transform: scale(2); }
   }
   
   @keyframes pulse {
      0% { transform: scale(1.5); }
      50% { transform: scale(3.1); }
      100% { transform: scale(2); }
   }
   
   .pulse {
      -webkit-animation-name: pulse;
      animation-name: pulse;
   }
</style>
</head>
<body>
   <div class = "animated pulse"></div>
</body>
</html>

列印頁面