Blinking cursor by CSS Animation


As mentioned in this topic, the cursor blinking is driven by JavaScript, which toggles blink-off class every 800ms. I think it can be implemented by CSS animation instead.

Here is how I did.

First, remove this line in /Applications/

    CursorView.startBlinking = function(cursorView) {
      if (this.cursorViews == null) {
        this.cursorViews = [];
      if (this.cursorViews.length === 1) {
-      return this.blinkInterval = setInterval(this.blinkCursors.bind(this), this.blinkPeriod / 2);

This disables the class toggling.

Then add the following CSS into the init stylesheet:

@-webkit-keyframes blinkCursor {
  from {
    opacity: 0;

  to {
    opacity: 1;

.cursor {
  // Remove the line of setInterval in cursor-view.js and apply this:
  -webkit-animation: blinkCursor 500ms ease infinite alternate;

I feel that this should replace the current implementation of cursor blinking. Here are the benefits of using CSS animation:

  • No class changes = not triggering layout = better performance
  • More customizable cursor blinking style


We originally used css for the blinking cursor, but removed it because it would trigger a layout. That was over a year ago, so i’ll look into this and see if we move this behavior back to css.