--- a/devtools/client/animationinspector/components/animation-details.js
+++ b/devtools/client/animationinspector/components/animation-details.js
@@ -243,21 +243,37 @@ AnimationDetails.prototype = {
   },
 
   renderAnimatedPropertiesBody: function (animationTypes) {
     // Add animated property body.
     const bodyEl = createNode({
       parent: this.containerEl,
       attributes: { "class": "animated-properties-body" }
     });
+
+    // Move unchanged value animation to bottom in the list.
+    const propertyNames = [];
+    const unchangedPropertyNames = [];
     for (let propertyName in this.tracks) {
+      if (!isUnchangedProperty(this.tracks[propertyName])) {
+        propertyNames.push(propertyName);
+      } else {
+        unchangedPropertyNames.push(propertyName);
+      }
+    }
+    Array.prototype.push.apply(propertyNames, unchangedPropertyNames);
+
+    for (let propertyName of propertyNames) {
       let line = createNode({
         parent: bodyEl,
         attributes: {"class": "property"}
       });
+      if (unchangedPropertyNames.includes(propertyName)) {
+        line.classList.add("unchanged");
+      }
       let {warning, className} =
         this.getPerfDataForProperty(this.animation, propertyName);
       createNode({
         // text-overflow doesn't work in flex items, so we need a second level
         // of container to actually have an ellipsis on the name.
         // See bug 972664.
         parent: createNode({
           parent: line,
@@ -324,8 +340,18 @@ AnimationDetails.prototype = {
     this.progressIndicatorEl.style.left =
       `${ this.dummyAnimation.effect.getComputedTiming().progress * 100 }%`;
   },
 
   get win() {
     return this.containerEl.ownerDocument.defaultView;
   }
 };
+
+function isUnchangedProperty(values) {
+  const firstValue = values[0].value;
+  for (let i = 1; i < values.length; i++) {
+    if (values[i].value !== firstValue) {
+      return false;
+    }
+  }
+  return true;
+}

--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
@@ -6,33 +6,34 @@
 
 const LAYOUT_ERRORS_L10N =
   new LocalizationHelper("toolkit/locales/layout_errors.properties");
 
 // Test that when an animation is selected, its list of animated properties is
 // displayed below it.
 
 const EXPECTED_PROPERTIES = [
+  "border-bottom-left-radius",
+  "border-bottom-right-radius",
+  "border-top-left-radius",
+  "border-top-right-radius",
+  "filter",
+  "height",
+  "transform",
+  "width",
+  // Unchanged value properties
   "background-attachment",
   "background-clip",
   "background-color",
   "background-image",
   "background-origin",
   "background-position-x",
   "background-position-y",
   "background-repeat",
-  "background-size",
-  "border-bottom-left-radius",
-  "border-bottom-right-radius",
-  "border-top-left-radius",
-  "border-top-right-radius",
-  "filter",
-  "height",
-  "transform",
-  "width"
+  "background-size"
 ].sort();
 
 add_task(function* () {
   yield addTab(URL_ROOT + "doc_keyframes.html");
   let {panel} = yield openAnimationInspector();
   let timeline = panel.animationsTimelineComponent;
   let propertiesList = timeline.rootWrapperEl
                                .querySelector(".animated-properties");

--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -541,16 +541,20 @@ body {
 
 /* Inline keyframes info in the timeline */
 
 .animation-detail .animated-properties .property {
   height: var(--timeline-animation-height);
   position: relative;
 }
 
+.animation-detail .animated-properties .property.unchanged {
+  opacity: 0.6;
+}
+
 .animation-detail .animated-properties .property:nth-child(2n) {
   background-color: var(--even-animation-timeline-background-color);
 }
 
 .animation-detail .animated-properties .name {
   width: var(--timeline-sidebar-width);
   padding-right: var(--keyframes-marker-size);
   box-sizing: border-box;