new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/graph/DelaySign.js
@@ -0,0 +1,46 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+"use strict";
+
+const { PureComponent } = require("devtools/client/shared/vendor/react");
+const dom = require("devtools/client/shared/vendor/react-dom-factories");
+const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+class DelaySign extends PureComponent {
+  static get propTypes() {
+    return {
+      animation: PropTypes.object.isRequired,
+      timeScale: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const {
+      animation,
+      timeScale,
+    } = this.props;
+
+    const { state } = animation;
+    const startTime = (state.previousStartTime || 0) - timeScale.minStartTime
+                      + (state.delay < 0 ? state.delay : 0);
+    const offset = startTime / timeScale.getDuration() * 100;
+    const width = Math.abs(state.delay) / timeScale.getDuration() * 100;
+
+    const delayClass = state.delay < 0 ? "negative" : "";
+    const fillClass = state.fill === "both" || state.fill === "backwards" ? "fill" : "";
+
+    return dom.div(
+      {
+        className: `animation-delay-sign ${ delayClass } ${ fillClass }`,
+        style: {
+          width: `${ width }%`,
+          left: `${ offset }%`,
+        },
+      }
+    );
+  }
+}
+
+module.exports = DelaySign;

--- a/devtools/client/inspector/animation/components/graph/SummaryGraph.js
+++ b/devtools/client/inspector/animation/components/graph/SummaryGraph.js
@@ -3,16 +3,17 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 const { createFactory, PureComponent } = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 
+const DelaySign = createFactory(require("./DelaySign"));
 const SummaryGraphPath = createFactory(require("./SummaryGraphPath"));
 
 class SummaryGraph extends PureComponent {
   static get propTypes() {
     return {
       animation: PropTypes.object.isRequired,
       simulateAnimation: PropTypes.func.isRequired,
       timeScale: PropTypes.object.isRequired,
@@ -31,14 +32,23 @@ class SummaryGraph extends PureComponent
         className: "animation-summary-graph",
       },
       SummaryGraphPath(
         {
           animation,
           simulateAnimation,
           timeScale,
         }
-      )
+      ),
+      animation.state.delay ?
+        DelaySign(
+          {
+            animation,
+            timeScale,
+          }
+        )
+      :
+      null
     );
   }
 }
 
 module.exports = SummaryGraph;

--- a/devtools/client/inspector/animation/components/graph/moz.build
+++ b/devtools/client/inspector/animation/components/graph/moz.build
@@ -1,11 +1,12 @@
 # This Source Code Form is subject to the terms of the Mozilla Public
 # License, v. 2.0. If a copy of the MPL was not distributed with this
 # file, You can obtain one at http://mozilla.org/MPL/2.0/.
 
 DevToolsModules(
     'ComputedTimingPath.js',
+    'DelaySign.js',
     'EffectTimingPath.js',
     'SummaryGraph.js',
     'SummaryGraphPath.js',
     'TimingPath.js'
 )

--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -83,16 +83,17 @@
 .animation-target .tag-name {
   cursor: default;
 }
 
 /* Summary Graph */
 .animation-summary-graph {
   height: 100%;
   padding-top: 5px;
+  position: relative;
   width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
 }
 
 .animation-summary-graph-path {
   height: 100%;
   width: 100%;
 }
 
@@ -113,16 +114,43 @@
   transform: scale(1, -1);
   vector-effect: non-scaling-stroke;
 }
 
 .animation-effect-timing-path path.infinity:nth-child(n+2) {
   opacity: 0.3;
 }
 
+.animation-delay-sign {
+  background-color: var(--theme-graphs-grey);
+  height: 3px;
+  position: absolute;
+  top: calc(100% - 1.5px);
+}
+
+.animation-delay-sign::before {
+  background-color: inherit;
+  border-radius: 50%;
+  content: "";
+  height: 6px;
+  left: -3px;
+  position: absolute;
+  top: -1.5px;
+  width: 6px;
+}
+
+.animation-delay-sign.fill {
+  background-color: var(--effect-timing-graph-color);
+}
+
+.animation-delay-sign.negative::before {
+  left: unset;
+  right: -3px;
+}
+
 /* No Animation Panel */
 .animation-error-message {
   overflow: auto;
 }
 
 .animation-error-message > p {
   white-space: pre;
 }