Growing animation transform: scale(1.1) doesn’t working if I set animation: fadeInX 0.5s ease forwards; to div. I don’t have any idea how to solve this.

@keyframes fadeInX {
  to {
    transform: translateX(0px);
  }
}

div{
    transform:translateX(-300px) scale(1);
    animation: fadeInX 0.5s ease forwards;
}

div:hover{
        cursor:pointer;
        transform: scale(1.1);
}