CSS animation overriding transition effects despite animation completing

Question

I have an issue in CSS where I am attempting to transform the scale of a button as I hover over it. However, before the button appears, I have an animation that also uses the transform property to slide the button into place.

.btn-box a{
    right: 2.5%;
    padding: 14px 70px;
    margin: 20px 15px;
    font-size: 18px;
    color: #fff;
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    border-radius: 15px;
    background: linear-gradient(90deg,#34525a,#A3A39B);
    transition: 2s;
    opacity: 0;
    animation: fadeIn 1s ease forwards; 
    animation-delay: 1.7s;   
}

.btn-box a:hover {
    box-shadow: 0 0 35px;
    transform: translateX(10px) scale(115%);
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateX(60px)
    }
    100% {
        opacity: 1;
        transform: translateX(0px);
    }

As you can see, both the .btn-box a:hover and @keyframes fadeIn use the transform property. Despite the animation completing after a second, the animation continues to override the hover transform.

I first took the transform property out of the keyframes and I expected the transform when hovering to work, and it did. So just by having the transform inside the keyframes, it conflicts with the transform inside the hover. I then tried to make it so that when hovering, the animation becomes paused. That did not work, and the animation transform continued to override the hover transform. Is there anyway for me to make it so that when the animation completes, it no longer overrides the hover effect?