What does editor.cursorBlinking do?

Question

The documentation says that the options for editor.cursorBlinking are 'blink', 'smooth', 'phase', 'expand' and 'solid'. It does not describe what each of these means.

What does each of these do?

Answer 1

The extra cursor animations idea is detailed here, and it points to a JSFiddle showing the five new options. The following styles show what each does:

@keyframes blink  {   0%,  49% { opacity: 0; }
                     51%, 100% { opacity: 1; }
}
@keyframes smooth {   0%,  20% { opacity: 0; }
                     60%, 100% { opacity: 1; }
}
@keyframes phase  {   0%,  20% { opacity: 0; }
                     90%, 100% { opacity: 1; }
}
@keyframes expand {   0%,  20% { transform: scaleY(0); }
                     80%, 100% { transform: scaleY(1); }
}

Basically:

• blink spends 49% in a given state, 2% transitioning, and 49% in the other state. Transitioning, in this and most below involves just changing the opacity. Because this (and the others) specify alternate (the animation runs in alternating directions), this means 98% in a given state and 2% transitioning to the other state.
• smooth spends 60% in a given state, 40% transitioning to the other state.
• phase spends 30% in a given state, 70% transitioning.
• expand spends 40% in a given state, 60% transitioning. The transition in this case is not opacity but the scaling on the y-axis, meaning it grows from, and shrinks to, the vertical midpoint.
• solid means no blinking at all, the cursor is always there.

In order to make the answer self-contained, I've copied the relevant stuff from that JSFiddle to below (compressing, and better labelling the different styles). Just run the code snippet to get a more visual representation:

---

body { font-family: "Menlo", "Monaco", "Courier New", "Courier"; font-size: 9pt; background-color: black; color: #fff; }
.line { line-height: 18px; background-color: #333; overflow: hidden; margin: 2px; vertical-align: middle; }
.cursor { position: relative; top: 2px; width: 5px; height: 14px; background-color: #eee; display: inline-block; margin-left: 1px; margin-right: 1px; }

@keyframes blink { 0%, 49% { opacity: 0; } 51%, 100% { opacity: 1; } }
@keyframes smooth { 0%, 20% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes phase { 0%, 20% { opacity: 0; } 90%, 100% { opacity: 1; } }
@keyframes expand { 0%, 20% { transform: scaleY(0); } 80%, 100% { transform: scaleY(1); } }

.blink { animation: blink 0.5s ease-in-out 0s infinite alternate; }
.smooth { animation: smooth 0.5s ease-in-out 0s infinite alternate; }
.phase { animation: phase 0.5s ease-in-out 0s infinite alternate; }
.expand { animation: expand 0.5s ease-in-out 0s infinite alternate; }

<div class="line"><div class="cursor blink"></div>-blink</div>
<div class="line"><div class="cursor smooth"></div>-smooth</div>
<div class="line"><div class="cursor phase"></div>-phase</div>
<div class="line"><div class="cursor expand"></div>-expand</div>
<div class="line"><div class="cursor solid"></div>-solid</div>