--- a/devtools/client/inspector/animation/components/AnimatedPropertyItem.js
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyItem.js
@@ -1,28 +1,37 @@
 /* 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 { 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"));
+
 class AnimatedPropertyItem extends PureComponent {
   static get propTypes() {
     return {
       property: PropTypes.string.isRequired,
       values: PropTypes.array.isRequired,
     };
   }
 
   render() {
+    const { property } = this.props;
+
     return dom.li(
       {
         className: "animated-property-item"
-      }
+      },
+      AnimatedPropertyName(
+        {
+          property,
+        }
+      )
     );
   }
 }
 
 module.exports = AnimatedPropertyItem;

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/components/AnimatedPropertyName.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 AnimatedPropertyName extends PureComponent {
+  static get propTypes() {
+    return {
+      property: PropTypes.string.isRequired,
+    };
+  }
+
+  render() {
+    const { property } = this.props;
+
+    return dom.div(
+      {
+        className: "animated-property-name",
+      },
+      dom.span(
+        {},
+        property
+      )
+    );
+  }
+}
+
+module.exports = AnimatedPropertyName;

--- a/devtools/client/inspector/animation/components/moz.build
+++ b/devtools/client/inspector/animation/components/moz.build
@@ -6,16 +6,17 @@ DIRS += [
     'graph'
 ]
 
 DevToolsModules(
     'AnimatedPropertyItem.js',
     'AnimatedPropertyList.js',
     'AnimatedPropertyListContainer.js',
     'AnimatedPropertyListHeader.js',
+    'AnimatedPropertyName.js',
     'AnimationDetailContainer.js',
     'AnimationDetailHeader.js',
     'AnimationItem.js',
     'AnimationList.js',
     'AnimationListContainer.js',
     'AnimationListHeader.js',
     'AnimationTarget.js',
     'AnimationTimelineTickItem.js',

--- a/devtools/client/themes/animation.css
+++ b/devtools/client/themes/animation.css
@@ -300,16 +300,26 @@
 .animated-property-item {
   height: 30px;
 }
 
 .animated-property-item:nth-child(2n+1) {
   background-color: var(--animation-even-background-color);
 }
 
+/* Animated Property Name */
+.animated-property-name {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: flex-end;
+  padding-right: 10px;
+  width: var(--sidebar-width);
+}
+
 /* No Animation Panel */
 .animation-error-message {
   overflow: auto;
 }
 
 .animation-error-message > p {
   white-space: pre;
 }