diff --git a/devtools/client/inspector/animation/components/AnimationItem.js b/devtools/client/inspector/animation/components/AnimationItem.js
index 3230ddf21e81..410b5758f0cd 100644
--- a/devtools/client/inspector/animation/components/AnimationItem.js
+++ b/devtools/client/inspector/animation/components/AnimationItem.js
@@ -39,7 +39,7 @@ class AnimationItem extends PureComponent {
 
     return dom.li(
       {
-        className: "animation-item"
+        className: `animation-item ${ animation.state.type }`
       },
       AnimationTarget(
         {
diff --git a/devtools/client/themes/animation.css b/devtools/client/themes/animation.css
index a320bf166b7d..92f1b0bd92f9 100644
--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -56,6 +56,18 @@
   background-color: var(--animation-even-background-color);
 }
 
+.animation-item.cssanimation {
+  --computed-timing-graph-color: var(--theme-contrast-background);
+}
+
+.animation-item.csstransition {
+  --computed-timing-graph-color: var(--theme-highlight-blue);
+}
+
+.animation-item.scriptanimation {
+  --computed-timing-graph-color: var(--theme-graphs-green);
+}
+
 /* Animation Target */
 .animation-target {
   align-items: center;
@@ -82,7 +94,7 @@
 }
 
 .animation-computed-timing-path path {
-  fill: lime;
+  fill: var(--computed-timing-graph-color);
   vector-effect: non-scaling-stroke;
   transform: scale(1, -1);
 }