CSS animation discussion

Hi there, There is another HTML here.
There is a one-click scroll to the top arrow, which is an SVG.

the markup is like this →

Current situation:

.arrowScrollUp {
    position: fixed;
    bottom: 1.25em;
    right: 1.25em;
    width: 3.125em;
    height: 3.125em;    
    text-decoration: none;
    animation-name: scrollup;
    animation-duration: 1s;
}
@keyframes scrollup {
    0%   { right:0;}
    100% { right:1.25em;}
}

In this also I was trying to get rid of keyframe animation because animation is one-sided, when disappearing the disappearance is immediate and sudden.

I tried something like this:

#arrowScrollUp {
    bottom: 1.25em;
    display: block;
    position: fixed;
    width: 3.125em;
    height: 3.125em;
    transform: translateX(100vw);
    transition: transform 1s ease;
}

.arrowScrollUp {
    position: fixed;
    bottom: 1.25em;
    right: 1.25em;
    width: 3.125em;
    height: 3.125em;   
    transform: translateX(0vw); 
}

It is JS which is injecting extra class:.arrowScrollUp when the condition is true, is discussion was done here →