Lag on custom newsletter icon animation

Hi there,

I changed the aesthetic for the newsletter Icon I added next to my social icons but there's a brief lag for the image to appear with hover. Can anyone help smooth it out? https://www.sashacoalition.org/

/*newsletter icon header desktop*/
@media only screen and (min-width:640px) { 
  .header-actions-action--social .icon--fill:nth-of-type(3) {
    svg {
      display:none;
    }    
    background-image: url(https://www.sashacoalition.org/s/Untitled-design-17.png);    
    background-size: 100%;    
    background-repeat: no-repeat;  
  } 
}  

/*hover effect on header newsletter icon*/
.header-actions-action--social .icon--fill:nth-of-type(3):hover {
  background-image: url(https://www.sashacoalition.org/s/Untitled-design-12.png);
}

You try reduce hover image size and add new url.