Adjust :hover property to a new property when the font-size of h1 has changed

Question

I have a little problem... I don't know how to adjust the :hover letter-spacing property when I have made a change in the appearance of the text using @keyframes... More specific: hover changes my h1 appearance like so: font-size, position, letter-spacing, etc. letter-spacing is default 0rem, but when I hover over the text it changes to 1rem. which works perfectly but I have added an animation that changes the position, font-size of h1, from font-size: 12.5rem; to font-size: 5rem; the problem is that I don't know how to change the letter-spacing when I hover over. When its font-size is 12.5rem; it looks good, but when the animation it's finished the font-size is 5rem, and it looks awful for me when I hover over it having letter-spacing 1rem. I need some help... please as you can see its changes its positions and font-size, the hover keeps to be 1 rem, I want to change the hover letter-spacing from 1rem when it has font-size12.5rem, to 0.2rem idk when I hover over it and it has the font-size of 5rem... I hope you understand what am I saying, btw if I've made any grammatical mistakes feel free to correct me, I'm not a native speaker and sometimes I struggle with English, therefore I need to know when I'm wrong. thanks btw.

body{
    margin: 0;
    padding: 0;
    font-family: "Montserrat", sans-serif;
    background: #1d2026;
    box-sizing: border-box;
}
.dark-mode {
    background: red;
    transition: 1s;
}
/* Aspectul lui .Welcome*/
/*aspect of .welcome*/

.Welcome h1{
    user-select: none;
    font-size: 12.5rem;
    letter-spacing: 0rem;
    position: absolute;
    margin: 0;
    top: 40%;
    left: 51%;
    transform: translate(-50%, -50%);
    text-align: center;
    background: -webkit-linear-gradient(320deg,rgb(100, 38, 38), rgba(84, 0, 153, 0.39));
    -webkit-background-clip: text;
    background-clip: border;
    -webkit-text-fill-color: transparent;
    transition: 0.7s;
    white-space: nowrap;
    overflow-x: auto;
}

/* CSS-ul pentru animatie*/
/*the css for changePose, name duration etc*/

.Welcome h1{
    animation-name: changePose;
    animation-duration: 1s;
    animation-delay: 6s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*Animatia de la hover si background-ul oferit*/
/*the hover animation which changes the size and letter-spacing*/

.Welcome h1:hover {
    font-size: 13.5rem;
    position: absolute;
    letter-spacing: 1rem;
    top: 40%;
    left: 51%;
    margin: 0;
    background-size: cover;
    transform: translate(-50%, -50%);
    background: src('https://f.vividscreen.info/soft/7e879fb5d5b73ef41cffd9032e9ad55e/Red-Sky-1920x1200.jpg');/*ignore this background*/
    -webkit-text-fill-color: transparent;
    background-clip: border-box;
    -webkit-background-clip: text;
}
/*Keyframurile de la animatia de tranzitie din mjloc
catre top*/
/* the keyframes to change that apearance of h1, from 12.5rem to 5rem*/

@keyframes changePose {
    from {
        position: absolute;
    }
    to {
        position: absolute;
        font-size:5rem;
        align-items: center;
        top: 8%;
    } 
}

/*Animatia efectului "ellipsis" (cele 3 puncte) loading*/
/*ellipsis animation*/

.Welcome h1::after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    -webkit-animation-timing-function: steps(4, end);
    animation-timing-function: steps(4, end);
    -webkit-animation: ellipsis;
    animation: ellipsis;
    animation-duration:1s;
    animation-iteration-count: 4;
    animation-delay: 1s;
    content: "\2026"; /*codul ascii pentru "..."*/
    width: 0px;
}

@keyframes ellipsis {
    to{
        width: 12.5rem;
    }
}

@-webkit-keyframes ellipsis {
    to {
    width: 12.5rem;    
    }
}

.btn{
    user-select: none;
    font-size: 2rem;
    color: #29313f;
    display: inline-flex;
    background: transparent;
    align-items: center;
    justify-content: center;
    border-radius: 5.5%;
    border: none;
    text-decoration: none;
    margin-top: 28%;
    margin-left: 47%;
}

.btn:hover{
    color: #303949;
    text-decoration: none;
    background: transparent;
    align-items: center;
}

/*Adaptarea ecranului la dfierite dimensiuni*/
/*Addaption the diffrent screen resolutin*/

@media only screen and (max-width: 800px) {
    .Welcome h1{
      font-size: 5rem;
      letter-spacing: 0;
    }
    .Welcome h1:hover{
        font-size: 6rem;
        letter-spacing: 0.4rem;
    }
    @keyframes changePose {
        from{
            font-size: 5rem;
            transition: 0.7s;
        }
        to{
            font-size: 3rem;
            top: 7%;
        }
    }
    
    @keyframes ellipsis {
        to{
            width: 5rem;
        }
    }
    @-webkit-keyframes ellipsis {
        to {
        width: 5rem;    
        }
    }
    .btn{
        font-size: 2rem;
        margin-top: 50%;
        margin-left: 44%;
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>welcome</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
</head>
<body> 
    <header>
    /*<nav> 
        <img src="" class="logoTemp">
    </nav>*/
    </header>
    <div class="Welcome"><h1>welcome</h1></div>
    <div>
    <button class =btn onclick="myFunction()">Epic mode</button>
    </div>
<script>
    function myFunction() {
       var element = document.body;
       element.classList.toggle("dark-mode");
    }
</script>
</body>
</html>

Answer 1

I suggest you not to use <h1> tag, as it has default CSS Values with different browser. Try to replace them with normal <div>, and clarify the styles you want.