--- a/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
+++ b/devtools/client/inspector/animation/components/keyframes-graph/KeyframesGraph.js
@@ -27,17 +27,17 @@ class KeyframesGraph extends PureCompone
       property,
       simulateAnimation,
       type,
       values,
     } = this.props;
 
     return dom.div(
       {
-        className: "keyframes-graph",
+        className: `keyframes-graph ${ property }`
       },
       KeyframesGraphPath(
         {
           getComputedStyle,
           property,
           simulateAnimation,
           type,
           values,

--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -365,21 +365,36 @@
 }
 
 .keyframes-graph-path {
   height: 100%;
   width: 100%;
 }
 
 .keyframes-graph-path path {
-  fill: lime;
+  fill: #00b0bd88;
+  stroke: #00b0bd;
   vector-effect: non-scaling-stroke;
   transform: scale(1, -1);
 }
 
+.keyframes-graph.opacity .keyframes-graph-path path {
+  fill: #df00a988;
+  stroke: #df00a9;
+}
+
+.keyframes-graph.transform .keyframes-graph-path path {
+  fill: #ea800088;
+  stroke: #ea8000;
+}
+
+.keyframes-graph-path .color-path path {
+  stroke: none;
+}
+
 /* No Animation Panel */
 .animation-error-message {
   overflow: auto;
 }
 
 .animation-error-message > p {
   white-space: pre;
 }