--- a/devtools/client/inspector/animation/animation.js
+++ b/devtools/client/inspector/animation/animation.js
@@ -238,16 +238,20 @@ class AnimationInspector {
     for (let propertyName in styles) {
       this.simulatedElement.style.setProperty(propertyName, styles[propertyName]);
     }
 
     return this.win.getComputedStyle(this.simulatedElement).getPropertyValue(property);
   }
 
   getNodeFromActor(actorID) {
+    if (!this.inspector) {
+      return Promise.reject("Animation inspector already destroyed");
+    }
+
     return this.inspector.walker.getNodeFromActor(actorID, ["node"]);
   }
 
   isPanelVisible() {
     return this.inspector && this.inspector.toolbox && this.inspector.sidebar &&
            this.inspector.toolbox.currentToolId === "inspector" &&
            this.inspector.sidebar.getCurrentTabID() === "newanimationinspector";
   }

--- a/devtools/client/inspector/animation/components/AnimationTarget.js
+++ b/devtools/client/inspector/animation/components/AnimationTarget.js
@@ -63,31 +63,54 @@ class AnimationTarget extends Component 
     if (!nodeFront) {
       try {
         nodeFront = await getNodeFromActor(animation.actorID);
       } catch (e) {
         // If an error occured while getting the nodeFront and if it can't be
         // attributed to the panel having been destroyed in the meantime, this
         // error needs to be logged and render needs to stop.
         console.error(e);
+        this.setState({ nodeFront: null });
         return;
       }
     }
 
     this.setState({ nodeFront });
   }
 
+  async ensureNodeFront() {
+    if (!this.state.nodeFront.actorID) {
+      // In case of no actorID, the node front had been destroyed.
+      // This will occur when the pseudo element was re-generated.
+      await this.updateNodeFront(this.props.animation);
+    }
+  }
+
+  async highlight() {
+    await this.ensureNodeFront();
+
+    if (this.state.nodeFront) {
+      this.props.onShowBoxModelHighlighterForNode(this.state.nodeFront);
+    }
+  }
+
+  async select() {
+    await this.ensureNodeFront();
+
+    if (this.state.nodeFront) {
+      this.props.setSelectedNode(this.state.nodeFront);
+    }
+  }
+
   render() {
     const {
       emitEventForTest,
       onHideBoxModelHighlighter,
-      onShowBoxModelHighlighterForNode,
       highlightedNode,
       setHighlightedNode,
-      setSelectedNode,
     } = this.props;
 
     const { nodeFront } = this.state;
 
     if (!nodeFront) {
       return dom.div(
         {
           className: "animation-target"
@@ -105,19 +128,19 @@ class AnimationTarget extends Component 
                    (isHighlighted ? " highlighting" : ""),
       },
       Rep(
         {
           defaultRep: ElementNode,
           mode: MODE.TINY,
           inspectIconTitle: getInspectorStr("inspector.nodePreview.highlightNodeLabel"),
           object: translateNodeFrontToGrip(nodeFront),
-          onDOMNodeClick: () => setSelectedNode(nodeFront),
+          onDOMNodeClick: () => this.select(),
           onDOMNodeMouseOut: () => onHideBoxModelHighlighter(),
-          onDOMNodeMouseOver: () => onShowBoxModelHighlighterForNode(nodeFront),
+          onDOMNodeMouseOver: () => this.highlight(),
           onInspectIconClick: (_, e) => {
             e.stopPropagation();
             setHighlightedNode(isHighlighted ? null : nodeFront);
           }
         }
       )
     );
   }