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!