caret-animation
caret-animation CSS 屬性用於啟用或停用插入符的閃爍行為。插入符是可編輯元素中出現的可見標記，指示下一個字元將插入或刪除的位置。
當對插入符應用自定義動畫時，您應該停止其預設閃爍，以免干擾動畫。
語法
css
/* Keyword values */
caret-animation: auto;
caret-animation: manual;
/* Global values */
caret-animation: inherit;
caret-animation: initial;
caret-animation: revert;
caret-animation: revert-layer;
caret-animation: unset;
值
caret-animation 屬性指定為下面列出的其中一個關鍵字值。
正式定義
在資料庫中未找到值！正式語法
caret-animation =
auto |
manual
示例
caret-animation 的基本用法
此示例展示了在可編輯元素上將 caret-animation 設定為 auto 與 manual 之間的區別。
HTML
標記包含兩個 <p> 元素，它們都設定了 contenteditable 屬性，使其可編輯。
html
<p contenteditable="true">
My caret animates because <code>caret-animation</code> is set to
<code>auto</code>.
</p>
<p contenteditable="true">
My caret doesn't animate because <code>caret-animation</code> is set to
<code>manual</code>.
</p>
CSS
CSS 將 caret-color 值設定為 red。然後，它將第一個段落的 caret-animation 值設定為 auto，將第二個段落的 caret-animation 值設定為 manual。
css
p {
caret-color: red;
}
p:first-of-type {
caret-animation: auto;
}
p:last-of-type {
caret-animation: manual;
}
結果
渲染結果如下所示
嘗試聚焦這兩個段落以檢視插入符行為的差異。
建立自定義插入符動畫
在此示例中，自定義插入符動畫應用於可編輯段落和文字輸入。
HTML
標記包含一個 <p> 元素和兩個文字 <input> 元素。<p> 元素設定了 contenteditable 屬性，使其可編輯。段落和第一個文字輸入都設定了 custom-caret 類。
html
<p contenteditable="true" class="custom-caret">
This paragraph has a custom animation applied to it, plus
<code>caret-animation: manual</code> to stop the default caret blinking and
allow the smooth animation to be seen.
</p>
<input
type="text"
class="custom-caret"
value="I've got a custom caret animation" />
<input type="text" value="I've got the default blinking caret" />
CSS
我們首先定義一組 @keyframes，它們將 caret-color 從 transparent 更改為 darkblue。
css
@keyframes custom-caret-animation {
from {
caret-color: transparent;
}
to {
caret-color: darkblue;
}
}
然後，我們使用自定義 @keyframes 動畫、caret-color 和 manual 的 caret-animation 值來樣式化 <p> 和第一個 <input>，以關閉預設的插入符閃爍行為。
css
.custom-caret {
animation: custom-caret-animation infinite linear alternate 0.75s;
caret-color: darkblue;
caret-animation: manual;
}
p,
input {
font-size: 1.6rem;
}
結果
渲染結果如下所示
嘗試聚焦前兩個元素，看看自定義插入符動畫是什麼樣子。要將其與預設閃爍插入符進行比較，您可以聚焦第三個元素。
規範
| 規範 |
|---|
| CSS Basic User Interface Module Level 4 # propdef-caret-animation |
瀏覽器相容性
載入中…