How do I use CSS transition property to create a sliding effect?

Question

I want to add transition to copy-icon div to imitate as if that div is emerging from the CONTACT button. I tried using the CSS transition property (transition: all 2s) in contact-link-hover class as well as the copy-icon. But it's not showing any transition on hover of both the div.

Also, I cannot use visibility: hidden as the button would still be a clickable one otherwise.

Is there anything wrong with the placement of this property? Or is it not working because I'm using the display property?

Here is my HTML -

<div *ngIf="showContactButton" class="contact-link-hover">
      <button (click)="openContactWindow()">CONTACT</button>
      <div class="copy-icon" (click)="copyEmailToClipBoard()">
        <img *ngIf="!isCopied" tooltip="Click to copy email" placement="top" show-delay="50" src="assets/img/copy-mail-icon.svg" alt="copy-mail-icon" />
        <img *ngIf="isCopied" tooltip="Email copied!" placement="top" show-delay="50" src="assets/img/check-mark.svg" alt="copy-mail-icon" style="width: 25px;" />
      </div>
    </div>

And the CSS/SCSS -

    .contact-link-hover {
      width: 150px;
      margin-right: -25px;
      text-align: left;
      .copy-icon {
        display: none;
      }
    }

    .contact-link-hover:hover {
      .copy-icon {
        cursor: pointer;
        display: inline-block;
        position: relative;
        width: 31px;
        top: 2px;
        margin-right: -40px;
        margin-left: 10px;
      }
    }

Here is a snapshot of the UI for reference - Need transition on the mail icon