--- a/devtools/client/inspector/animation/animation.js
+++ b/devtools/client/inspector/animation/animation.js
@@ -429,41 +429,49 @@ class AnimationInspector {
   }
 
   async setAnimationsPlayState(doPlay) {
     if (typeof this.hasPausePlaySome === "undefined") {
       this.hasPausePlaySome =
         await this.inspector.target.actorHasMethod("animations", "pauseSome");
     }
 
+    const { animations, timeScale } = this.state;
+
     try {
+      if (doPlay && animations.every(animation =>
+                      timeScale.getEndTime(animation) <= animation.state.currentTime)) {
+        await this.animationsFront.setCurrentTimes(animations, 0, true,
+                                                   { relativeToCreatedTime: true });
+      }
+
       // If the server does not support pauseSome/playSome function, (which happens
       // when connected to server older than FF62), use pauseAll/playAll instead.
       // See bug 1456857.
       if (this.hasPausePlaySome) {
         if (doPlay) {
-          await this.animationsFront.playSome(this.state.animations);
+          await this.animationsFront.playSome(animations);
         } else {
-          await this.animationsFront.pauseSome(this.state.animations);
+          await this.animationsFront.pauseSome(animations);
         }
       } else if (doPlay) {
         await this.animationsFront.playAll();
       } else {
         await this.animationsFront.pauseAll();
       }
 
-      await this.updateAnimations(this.state.animations);
+      await this.updateAnimations(animations);
     } catch (e) {
       // Expected if we've already been destroyed or other node have been selected
       // in the meantime.
       console.error(e);
       return;
     }
 
-    await this.updateState([...this.state.animations]);
+    await this.updateState([...animations]);
   }
 
   /**
    * Enable/disable the animation state change listener.
    * If set true, observe "changed" event on current animations.
    * Otherwise, quit observing the "changed" event.
    *
    * @param {Bool} isEnabled

--- a/devtools/client/inspector/animation/utils/timescale.js
+++ b/devtools/client/inspector/animation/utils/timescale.js
@@ -144,11 +144,25 @@ class TimeScale {
   /**
    * Return entire animations duration.
    *
    * @return {Number} duration
    */
   getDuration() {
     return this.maxEndTime - this.minStartTime;
   }
+
+  /**
+   * Return end time of given animation.
+   * This time does not include playbackRate and cratedTime.
+   * Also, if the animation has infinite iterations, this returns Infinity.
+   *
+   * @param {Object} animation
+   * @return {Numbber} end time
+   */
+  getEndTime({ state }) {
+    return state.iterationCount ?
+             state.delay + state.duration * state.iterationCount + state.endDelay :
+             Infinity;
+  }
 }
 
 module.exports = TimeScale;