--- a/devtools/client/inspector/animation/components/AnimatedPropertyItem.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyItem.js
@@ -4,16 +4,17 @@
 
 "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 AnimatedPropertyName = createFactory(require("./AnimatedPropertyName"));
+const KeyframesGraph = createFactory(require("./keyframes-graph/KeyframesGraph"));
 
 class AnimatedPropertyItem extends PureComponent {
   static get propTypes() {
     return {
       property: PropTypes.string.isRequired,
       state: PropTypes.object.isRequired,
       values: PropTypes.array.isRequired,
     };
@@ -29,14 +30,15 @@ class AnimatedPropertyItem extends PureC
       {
         className: "animated-property-item"
       },
       AnimatedPropertyName(
         {
           property,
           state,
         }
-      )
+      ),
+      KeyframesGraph()
     );
   }
 }
 
 module.exports = AnimatedPropertyItem;

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
@@ -0,0 +1,20 @@
+/* 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");
+
+class KeyframesGraph extends PureComponent {
+  render() {
+    return dom.div(
+      {
+        className: "keyframes-graph"
+      }
+    );
+  }
+}
+
+module.exports = KeyframesGraph;

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/keyframes-graph/moz.build
@@ -0,0 +1,7 @@
+# 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(
+    'KeyframesGraph.js',
+)

--- a/devtools/client/inspector/animation/components/moz.build
+++ b/devtools/client/inspector/animation/components/moz.build
@@ -1,14 +1,15 @@
 # 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/.
 
 DIRS += [
-    'graph'
+    'graph',
+    'keyframes-graph'
 ]
 
 DevToolsModules(
     'AnimatedPropertyItem.js',
     'AnimatedPropertyList.js',
     'AnimatedPropertyListContainer.js',
     'AnimatedPropertyListHeader.js',
     'AnimatedPropertyName.js',

--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -300,16 +300,17 @@
   list-style-type: none;
   margin-top: 0;
   overflow-y: auto;
   padding: 0;
 }
 
 /* Animated Property Item */
 .animated-property-item {
+  display: flex;
   height: 30px;
 }
 
 .animated-property-item:nth-child(2n+1) {
   background-color: var(--animation-even-background-color);
 }
 
 /* Animated Property Name */
@@ -351,16 +352,22 @@
   width: 15px;
   -moz-context-properties: fill;
 }
 
 .animated-property-name.warning span {
   text-decoration: underline dotted;
 }
 
+/* Keyframes Graph */
+.keyframes-graph {
+  height: 100%;
+  width: calc(100% - var(--sidebar-width) - var(--graph-right-offset));
+}
+
 /* No Animation Panel */
 .animation-error-message {
   overflow: auto;
 }
 
 .animation-error-message > p {
   white-space: pre;
 }