# Caret Blink Animation

## `animate-caret-blink`

Animation for a blinking caret/cursor effect. This animation is typically used in text input fields to indicate where the user can type.

<table>
<thead>
<tr>
<th>Class</th>
<th>Styles</th>
</tr>
</thead>
<tbody>
<tr>
<td>

`animate-caret-blink`

</td>
<td>

```css
animation: caret-blink 1.25s ease-out infinite;

@keyframes caret-blink {
  0%,
  70%,
  100% {
    opacity: 1;
  }
  20%,
  50% {
    opacity: 0;
  }
}
```

</td>
</tr>
</tbody>
</table>