--- a/devtools/client/inspector/animation/components/graph/SummaryGraph.js
+++ b/devtools/client/inspector/animation/components/graph/SummaryGraph.js
@@ -52,17 +52,19 @@ class SummaryGraph extends PureComponent
     if (state.delay) {
       text += getStr("player.animationDelayLabel") + " ";
       text += getTime(state.delay);
       text += "\n";
     }
 
     // Adding the duration.
     text += getStr("player.animationDurationLabel") + " ";
-    text += getTime(state.duration);
+    text += state.duration === Infinity
+              ? getStr("player.infiniteDurationText")
+              : getTime(state.duration);
     text += "\n";
 
     // Adding the endDelay.
     if (state.endDelay) {
       text += getStr("player.animationEndDelayLabel") + " ";
       text += getTime(state.endDelay);
       text += "\n";
     }
@@ -71,20 +73,21 @@ class SummaryGraph extends PureComponent
     if (state.iterationCount !== 1) {
       text += getStr("player.animationIterationCountLabel") + " ";
       text += state.iterationCount || getStr("player.infiniteIterationCountText");
       text += "\n";
     }
 
     // Adding the iteration start.
     if (state.iterationStart !== 0) {
-      const iterationStartTime = state.iterationStart * state.duration / 1000;
-      text += getFormatStr("player.animationIterationStartLabel",
+      text += getFormatStr("player.animationIterationStartLabel2",
                            state.iterationStart,
-                           numberWithDecimals(iterationStartTime, 2));
+                           state.duration === Infinity
+                             ? getStr("player.infiniteDurationText")
+                             : getTime(state.iterationStart * state.duration));
       text += "\n";
     }
 
     // Adding the easing if it is not "linear".
     if (state.easing && state.easing !== "linear") {
       text += getStr("player.animationOverallEasingLabel") + " ";
       text += state.easing;
       text += "\n";

--- a/devtools/client/locales/en-US/animationinspector.properties
+++ b/devtools/client/locales/en-US/animationinspector.properties
@@ -31,16 +31,21 @@ panel.noAnimation=No animations were fou
 # animations, not just the ones applying to the current element.
 panel.allAnimations=All animations
 
 # LOCALIZATION NOTE (player.animationDurationLabel):
 # This string is displayed in each animation player widget. It is the label
 # displayed before the animation duration.
 player.animationDurationLabel=Duration:
 
+# LOCALIZATION NOTE (player.infiniteDurationText):
+# This string is displayed in a tooltip on animation player widget, in case the
+# duration of the animation is infinite.
+player.infiniteDurationText=∞
+
 # LOCALIZATION NOTE (player.animationDelayLabel):
 # This string is displayed in each animation player widget. It is the label
 # displayed before the animation delay.
 player.animationDelayLabel=Delay:
 
 # LOCALIZATION NOTE (player.animationEndDelayLabel):
 # This string is displayed in each animation player widget. It is the label
 # displayed before the animation endDelay.
@@ -70,16 +75,27 @@ player.infiniteIterationCountText=∞
 # LOCALIZATION NOTE (player.animationIterationStartLabel):
 # This string is displayed in a tooltip that appears when hovering over
 # animations in the timeline. It is the label displayed before the animation
 # iterationStart value.
 # %1$S will be replaced by the original iteration start value
 # %2$S will be replaced by the actual time of iteration start
 player.animationIterationStartLabel=Iteration start: %1$S (%2$Ss)
 
+# LOCALIZATION NOTE (player.animationIterationStartLabel2):
+# This string is displayed in a tooltip that appears when hovering over
+# animations in the timeline. It is the label displayed before the animation
+# iterationStart value.
+# %1$S will be replaced by the original iteration start value
+# %2$S will be replaced by the actual time of iteration start without time unit
+# e.g.
+# If iterationStart of animation is 0.5 and duration is 1 sec, the string will be
+# "Iteration start: 0.5 (0.5s)"
+player.animationIterationStartLabel2=Iteration start: %1$S (%2$S)
+
 # LOCALIZATION NOTE (player.animationOverallEasingLabel):
 # This string is displayed in a tooltip that appears when hovering over
 # animations in the timeline. It is the label displayed before the easing
 # that applies to a whole iteration of an animation as opposed to the
 # easing that applies between animation keyframes.
 player.animationOverallEasingLabel=Overall easing:
 
 # LOCALIZATION NOTE (player.animationTimingFunctionLabel):