Ensure animations don't continue playing when we've paused playback (#417)

src/replay/index.ts

@@ -276,6 +276,7 @@ export class Replayer {
       this.service.send({ type: 'PAUSE' });
       this.service.send({ type: 'PLAY', payload: { timeOffset } });
     }
+    this.iframe.contentDocument.getElementsByTagName('html')[0].classList.remove('rrweb-paused');
     this.emitter.emit(ReplayerEvents.Start);
   }
 
@@ -287,6 +288,7 @@ export class Replayer {
       this.play(timeOffset);
       this.service.send({ type: 'PAUSE' });
     }
+    this.iframe.contentDocument.getElementsByTagName('html')[0].classList.add('rrweb-paused');
     this.emitter.emit(ReplayerEvents.Pause);
   }
 
@@ -492,6 +494,10 @@ export class Replayer {
     const injectStylesRules = getInjectStyleRules(
       this.config.blockClass,
     ).concat(this.config.insertStyleRules);
+    injectStylesRules.push('html.rrweb-paused * { animation-play-state: paused !important; }');
+    if (!this.service.state.matches('playing')) {
+      this.iframe.contentDocument.getElementsByTagName('html')[0].classList.add('rrweb-paused');
+    }
     for (let idx = 0; idx < injectStylesRules.length; idx++) {
       (styleEl.sheet! as CSSStyleSheet).insertRule(injectStylesRules[idx], idx);
     }