CSS transitions cause visual pulsing

To add a little more visual appeal, I added some CSS transitions to the styling for indent-guide-improved. It works great, but I noticed that when I scroll, the styling pulses. I assume that this is because the classes indent-guide-stack and indent-guide-active are being removed and added as the user scrolls, triggering the transitions.

I have included a gif of this behavior at the bottom of this issue. (It may be difficult to see in gif format).

Here is the relevant styling that is in my styles.less file:

// Formatting for indent-guide-improved
.indent-guide-improved {
  @color-off: fadeout(@brown-gray, 50%);
  @color-ancestor: mix(@brown-gray, @orange, 75%);
  @color-active: fadeout(@orange, 50%);
  @light-spread: 10px;
  @transition-speed: 0.5s;

  background-color: @color-off;
  box-shadow: 0 0 0 0 @color-off;
  transition: box-shadow 0.5s, background-color 0.5s;
  &.indent-guide-stack {
    background-color: @color-ancestor;
    box-shadow: 0 0 @light-spread 1px fadeout(@color-ancestor, 25%);
    &.indent-guide-active {
      background-color: @color-active;
      box-shadow: 0 0 @light-spread 1px fadeout(@orange, 25%);
      transition: box-shadow (@transition-speed * 1.75), background-color (@transition-speed * 1.75);
    }
  }
}

indention guide transitions

harai / indent-guide-improved

CSS transitions cause visual pulsing #69