--- a/devtools/client/animationinspector/components/animation-time-block.js
+++ b/devtools/client/animationinspector/components/animation-time-block.js
@@ -102,24 +102,34 @@ AnimationTimeBlock.prototype = {
                                minEffectProgressThreshold, tracks, graphHelper);
     if (state.easing !== "linear") {
       renderEffectEasingGraph(summaryEl, state, totalDisplayedDuration,
                               minEffectProgressThreshold, graphHelper);
     }
     graphHelper.destroy();
 
     // The animation name is displayed over the animation.
-    createNode({
-      parent: createNode({
-        parent: this.containerEl,
-        attributes: {
-          "class": "name",
-          "title": this.getTooltipText(state)
-        },
+    const nameEl = createNode({
+      parent: this.containerEl,
+      attributes: {
+        "class": "name",
+        "title": this.getTooltipText(state)
+      }
+    });
+
+    createSVGNode({
+      parent: createSVGNode({
+        parent: nameEl,
+        nodeType: "svg",
       }),
+      nodeType: "text",
+      attributes: {
+        "y": "50%",
+        "x": "100%",
+      },
       textContent: state.name
     });
 
     // Delay.
     if (state.delay) {
       // Negative delays need to start at 0.
       createNode({
         parent: this.containerEl,

--- a/devtools/client/animationinspector/test/browser_animation_timeline_shows_name_label.js
+++ b/devtools/client/animationinspector/test/browser_animation_timeline_shows_name_label.js
@@ -17,30 +17,12 @@ add_task(function* () {
   checkNameLabel(panel.animationsTimelineComponent.rootWrapperEl, "simple-animation");
 
   info("Selecting 'no-compositor' animation which is not running on compositor");
   yield selectNodeAndWaitForAnimations(".no-compositor", inspector);
   checkNameLabel(panel.animationsTimelineComponent.rootWrapperEl, "no-compositor");
 });
 
 function checkNameLabel(rootWrapperEl, expectedLabelContent) {
-  const timeblockEl = rootWrapperEl.querySelector(".time-block");
-  const labelEl = rootWrapperEl.querySelector(".name div");
+  const labelEl = rootWrapperEl.querySelector(".name svg text");
   is(labelEl.textContent, expectedLabelContent,
      `Text content of labelEl sould be ${ expectedLabelContent }`);
-
-  // Expand timeblockEl to avoid max-width of the label.
-  timeblockEl.style.width = "10000px";
-  const originalLabelWidth = labelEl.clientWidth;
-  ok(originalLabelWidth < timeblockEl.clientWidth / 2,
-     "Label width should be less than 50%");
-
-  // Set timeblockEl width to double of original label width.
-  timeblockEl.style.width = `${ originalLabelWidth * 2 }px`;
-  is(labelEl.clientWidth + labelEl.offsetLeft, originalLabelWidth,
-     `Label width + offsetLeft should be ${ originalLabelWidth }px`);
-
-  // Shrink timeblockEl to enable max-width.
-  timeblockEl.style.width = `${ originalLabelWidth }px`;
-  is(labelEl.clientWidth + labelEl.offsetLeft,
-     Math.round(timeblockEl.clientWidth / 2),
-     "Label width + offsetLeft should be half of timeblockEl");
 }

--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -426,36 +426,37 @@ body {
 .animation-timeline .animation .summary path.enddelay-path.negative {
   fill: none;
   stroke: var(--enddelay-hidden-progress-color);
   stroke-dasharray: 2, 2;
 }
 
 .animation-timeline .animation .name {
   position: absolute;
-  color: var(--theme-content-color3);
   top: 0px;
   left: 0px;
   height: 100%;
   width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 0 2px;
-  box-sizing: border-box;
   --fast-track-icon-width: 15px;
-  z-index: 1;
+}
+
+.animation-timeline .animation .name svg {
+  height: 100%;
+  width: calc(100% - 20px);
 }
 
-.animation-timeline .animation .name div {
-  /* Flex items don't support text-overflow, so a child div is used */
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  background-color: rgba(255, 255, 255, 0.7);
-  max-width: 50%;
+.animation-timeline .animation .name text {
+  fill: var(--theme-focus-outline-color);
+  stroke: var(--theme-body-background);
+  stroke-width: 4;
+  stroke-opacity: .5;
+  stroke-linejoin: round;
+  paint-order: stroke;
+  text-anchor: end;
+  dominant-baseline: middle;
 }
 
 .animation-timeline .fast-track .name::after {
   /* Animations running on the compositor have the fast-track background image*/
   content: "";
   display: block;
   position: absolute;
   top: 5px;