new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerItem.js
@@ -0,0 +1,33 @@
+/* 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 KeyframeMarkerItem extends PureComponent {
+  static get propTypes() {
+    return {
+      keyframe: PropTypes.object.isRequired,
+    };
+  }
+
+  render() {
+    const { keyframe } = this.props;
+
+    return dom.li(
+      {
+        className: "keyframe-marker-item",
+        title: keyframe.value,
+        style: {
+          left: `${ keyframe.offset * 100 }%`,
+        },
+      }
+    );
+  }
+}
+
+module.exports = KeyframeMarkerItem;

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframeMarkerList.js
@@ -0,0 +1,32 @@
+/* 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 { 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 KeyframeMarkerItem = createFactory(require("./KeyframeMarkerItem"));
+
+class KeyframeMarkerList extends PureComponent {
+  static get propTypes() {
+    return {
+      values: PropTypes.array.isRequired,
+    };
+  }
+
+  render() {
+    const { values } = this.props;
+
+    return dom.ul(
+      {
+        className: "keyframe-marker-list"
+      },
+      values.map(value => KeyframeMarkerItem({ keyframe: value }))
+    );
+  }
+}
+
+module.exports = KeyframeMarkerList;

--- a/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.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 KeyframeMarkerList = createFactory(require("./KeyframeMarkerList"));
 const KeyframesGraphPath = createFactory(require("./KeyframesGraphPath"));
 
 class KeyframesGraph extends PureComponent {
   static get propTypes() {
     return {
       getComputedStyle: PropTypes.func.isRequired,
       property: PropTypes.string.isRequired,
       simulateAnimation: PropTypes.func.isRequired,
@@ -37,14 +38,15 @@ class KeyframesGraph extends PureCompone
       KeyframesGraphPath(
         {
           getComputedStyle,
           property,
           simulateAnimation,
           type,
           values,
         }
-      )
+      ),
+      KeyframeMarkerList({ values })
     );
   }
 }
 
 module.exports = KeyframesGraph;

--- a/devtools/client/inspector/animation/components/keyframes-graph/moz.build
+++ b/devtools/client/inspector/animation/components/keyframes-graph/moz.build
@@ -2,11 +2,13 @@
 # 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(
     'ColorPath.js',
     'ComputedStylePath.js',
     'DiscretePath.js',
     'DistancePath.js',
+    'KeyframeMarkerItem.js',
+    'KeyframeMarkerList.js',
     'KeyframesGraph.js',
     'KeyframesGraphPath.js',
 )

--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -7,25 +7,27 @@
 :root {
   --animation-even-background-color: rgba(0, 0, 0, 0.05);
   --command-pick-image: url(chrome://devtools/skin/images/command-pick.svg);
   --fast-track-image: url("images/animation-fast-track.svg");
   --fill-color-cssanimation: var(--theme-contrast-background);
   --fill-color-csstransition: var(--theme-highlight-blue);
   --fill-color-scriptanimation: var(--theme-graphs-green);
   --graph-right-offset: 10px;
+  --keyframe-marker-shadow-color: #c4c4c4;
   --sidebar-width: 200px;
   --stroke-color-cssanimation: var(--theme-highlight-lightorange);
   --stroke-color-csstransition: var(--theme-highlight-bluegrey);
   --stroke-color-scriptanimation: var(--theme-highlight-green);
   --tick-line-style: 0.5px solid rgba(128, 136, 144, 0.5);
 }
 
 :root.theme-dark {
   --animation-even-background-color: rgba(255, 255, 255, 0.05);
+  --keyframe-marker-shadow-color: #818181;
 }
 
 :root.theme-firebug {
   --command-pick-image: url(chrome://devtools/skin/images/firebug/command-pick.svg);
 }
 
 /* Root element of animation inspector */
 #animation-container {
@@ -356,16 +358,17 @@
 .animated-property-name.warning span {
   text-decoration: underline dotted;
 }
 
 /* Keyframes Graph */
 .keyframes-graph {
   height: 100%;
   padding-top: 3px;
+  position: relative;
   width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
 }
 
 .keyframes-graph-path {
   height: 100%;
   width: 100%;
 }
 
@@ -406,16 +409,49 @@
   stroke-opacity: 0;
   vector-effect: non-scaling-stroke;
 }
 
 .keyframes-graph-path .hint rect:hover {
   stroke-opacity: 1;
 }
 
+/* Keyframe Marker List */
+.keyframe-marker-list {
+  pointer-events: none;
+  position: absolute;
+  height: 100%;
+  list-style-type: none;
+  top: 0%;
+  width: 100%;
+}
+
+.keyframe-marker-item {
+  box-shadow: 0 0 0 1px var(--keyframe-marker-shadow-color);
+  border-radius: 100%;
+  pointer-events: auto;
+  position: absolute;
+  top: 50%;
+  height: 10px;
+  transform: translate(-5px, -3px);
+  width: 10px;
+}
+
+.animated-property-list-container.cssanimation .keyframe-marker-item {
+  background-color: var(--fill-color-cssanimation);
+}
+
+.animated-property-list-container.csstransition .keyframe-marker-item {
+  background-color: var(--fill-color-csstransition);
+}
+
+.animated-property-list-container.scriptanimation .keyframe-marker-item {
+  background-color: var(--fill-color-scriptanimation);
+}
+
 /* No Animation Panel */
 .animation-error-message {
   overflow: auto;
 }
 
 .animation-error-message > p {
   white-space: pre;
 }