CSS · 1000 ms

Stepped blink caret

A terminal cursor that snaps on and off instead of fading.

Default CSS transitions ease — that reads as Web, not as terminal. Force the keyframe through steps(2) and the caret snaps cleanly between visible and hidden at 1 Hz. Tiny detail, completely changes what kind of screen the page seems to be on.

udaysinh

Demo

Live demo

$ echo hello
hello
$ 

The demo runs the same CSS code shown below — replay to retrigger.

Code

1 Hz snap blink.css

.caret {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: currentColor;
  vertical-align: -0.12em;
  animation: blink 1s steps(2) infinite;
}
@keyframes blink { to { opacity: 0; } }