CSS - caret-animation

• トップ
• CSSリファレンス
• caret-animation

概要

説明

テキスト入力時に表示されるキャレットに対して caret-color のアニメーションを適用する際、デフォルトの点滅動作が邪魔になることがあります。このプロパティを指定することによりデフォルトの点滅アニメーションをオフにすることができます。

auto

ブラウザのデフォルト動作に従います。規定値です。

manual

デフォルトの点滅動作を抑制します。

使用例

@keyframes my-caret {
  from { caret-color: #fff; }
  to   { caret-color: #000; }
}
.my-input {
  animation: my-caret .2s ease-in infinite alternate;
}
.caret-animation-manual {
  caret-animation: manual;
}

<input type="text" class="my-input">
<input type="text" class="my-input caret-animation-manual">

入力部品をマウスクリックしてカーソル(キャレット)を表示してみてください。左側はデフォルトの点滅動作と animation で指定した点滅動作が干渉して不規則に見える点滅になってしまいますが、右側はデフォルトの点滅動作を抑制して animation で指定した通りの点滅動作となります。

リンク

• https://drafts.csswg.org/css-ui/#propdef-caret-animation
• https://developer.mozilla.org/en-US/docs/Web/CSS/caret-animation
• https://caniuse.com/mdn-css_properties_caret-animation