Blinking cursor by CSS Animation


#1

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/Atom.app/Contents/Resources/app/src/cursor-view.js:

    CursorView.startBlinking = function(cursorView) {
      if (this.cursorViews == null) {
        this.cursorViews = [];
      }
      this.cursorViews.push(cursorView);
      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

#2

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.