<div >
    <button [disabled]="btnStatus"  type="submit">
        <div [hidden]="btnStatus">
          Send Message&nbsp;&nbsp;<i  style="vertical-align: -6px;">send</i>
        </div>

        <div [hidden]="!btnStatus"  role="status">
           <span >Loading...</span>
       </div>
          
    </button>
</div> 

In the above HTML code i want to animate the send icon such that it translates on X axix when i hover on the button.

I have tried

.buttonSend:hover .buttonIcon
{
    animation: logoAnim 0.5s forwards;
}


@keyframes logoAnim 
{
   from 
   {
     transform: translateX(0);
   }
   to
   {
     transform: translateX(10);
     opacity: 0;
   }
}

CodePudding user response：

First of all, remove .buttonIcon from .buttonSend:hover .buttonIcon {...} as there is no element with that class name.

.buttonSend:hover {
  animation: logoAnim 0.5s forwards;
}

Now, fix the typo where you set the button to translate 10px to the right which is written 10 without mentioning the units which are in pixels px

@keyframes logoAnim  {
   from {
     transform: translateX(0);
   }

   to {
     transform: translateX(10px);
     opacity: 0;
   }
}

Complete code:

.buttonSend:hover {
  animation: logoAnim 0.5s forwards;
}

@keyframes logoAnim {
  from {
    transform: translateX(0);
  }
  to {
    /* mention the units (px)! */
    transform: translateX(10px);
    opacity: 0;
  }
}

<div >
  <button [disabled]="btnStatus"  type="submit">
        <div [hidden]="btnStatus">
          Send Message&nbsp;&nbsp;<i  style="vertical-align: -6px;">send</i>
        </div>

        <div [hidden]="!btnStatus"  role="status">
           <span >Loading...</span>
       </div>
          
    </button>
</div>