Show HN: Ten seconds to ponder if a thread is worth it

A userstyle that makes you wait ten seconds before entering a Hacker News thread. I use stylus to manage mine.

.subtext {
  --bar-color: #f60;
  --animation-delay: 0.5s;
  --animation-duration: 9.5s;

  background-image: linear-gradient(to left, transparent 50%, var(--bar-color) 50%);
  background-position: right;
  background-size: 201%;
  display: inline-block;
  transition: background-position 0.2s;
}

.subtext:hover {
  background-position: left;
  transition: background-position var(--animation-duration) linear var(--animation-delay);
}

.subtext a[href^="item"] {
  pointer-events: none;
}

.subtext:hover a[href^="item"] {
  animation: enable-click var(--animation-duration) forwards step-end var(--animation-delay);
}

@keyframes enable-click {
  to {
    pointer-events: auto;
  }
}

Special thanks to Martino di Filippo (@MartinodF) for showing me the animation-timing-function: step-end CSS property!

from Hacker News https://ift.tt/3bR7SyS