use css animations to trigger line annotations

[anukul]

how this approach works

• register a css animation that targets lines of code
• register a js event handler that is triggered when this animation starts. here:
  • annotate line
  • add a seen class that prevents this line of code from being animated again

credits to refined-github for this approach, specific file linked in code comment.

it fixes 3 problems in the previous approach:

• stale annotations: navigating from one page to another sometimes preserved line annotations from the previous page
• large files: in large files, lines load dynamically as the user scrolls. these lines would not get annotated
• code folding: line annotations would get messed up if any code block was folded / unfolded

preview:

https://user-images.githubusercontent.com/44864521/222267299-e030cecb-2273-4ee3-b57d-591f4398fcbe.mov