diff --git a/components/email/__tests__/recipient-popover.test.tsx b/components/email/__tests__/recipient-popover.test.tsx
index de864b1e5..e4316264e 100644
--- a/components/email/__tests__/recipient-popover.test.tsx
+++ b/components/email/__tests__/recipient-popover.test.tsx
@@ -75,3 +75,14 @@ describe('RecipientCardPopover', () => {
     expect(onClose).toHaveBeenCalledTimes(3);
   });
 });
+
+describe('recipient card styling', () => {
+  // A bare `duration-*` sets transition-duration, and with no
+  // transition-property that means `all`: the card slid from the top left
+  // corner to its anchor instead of appearing there.
+  it('times only the enter animation, not a transition on its position', () => {
+    render(<RecipientCardPopover anchor={{ top: 10, bottom: 30, left: 10 }} email={address} onClose={() => {}} />);
+    const classes = screen.getByRole('dialog').className.split(/\s+/);
+    expect(classes.filter((c) => /^duration-/.test(c))).toEqual([]);
+  });
+});
diff --git a/components/email/recipient-popover.tsx b/components/email/recipient-popover.tsx
index faacdef5a..6be5c80e6 100644
--- a/components/email/recipient-popover.tsx
+++ b/components/email/recipient-popover.tsx
@@ -184,7 +184,7 @@ export function placeCard(anchor: CardAnchor, height: number): { top: number; le
 }
 
 export const recipientCardClass =
-  "fixed z-50 w-[300px] max-w-[calc(100vw-16px)] bg-background rounded-lg shadow-lg border border-border animate-in fade-in-0 zoom-in-95 duration-100";
+  "fixed z-50 w-[300px] max-w-[calc(100vw-16px)] bg-background rounded-lg shadow-lg border border-border animate-in fade-in-0 zoom-in-95 animation-duration-100";
 
 interface RecipientCardPopoverProps extends RecipientCardProps {
   anchor: CardAnchor;