There is a delay between my borders switching colors. Was wondering how i could fix that as it looks wierd. full code https://github.com/XxTyaftioNxX/RockPaperScissors

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Rock Paper Scissors</title>
    <link rel="stylesheet" href="RockPaperScissors.css">
</head>
<body>
    <header>
        <h1>Rock Paper Scissors</h1>
    </header>
    <div class="score-board" id="score">
        <div id="user-label" class="badge">user</div>
        <div id ="comp-label"class="badge">comp</div>
        <span id="user-score">0</span>:<span id="computer-score">0</span>
    </div>
    <div class="result">
        <p>LETS GET THAT BREAD</p>
    </div>
    <div class="choices">
        <div class="choice" id="rock">
            <img src="assets/rock.png" alt="">
        </div>
        <div class="choice" id="paper">
            <img src="assets/paper.png" alt="">
        </div>
        <div class="choice" id="scissors">
            <img src="assets/scissors.png" alt="">
        </div>
    </div> 
    <p id="action-message">Make Your Move :V</p>   
    <script src="RockPaperScissors.js">
    </script> 
</body>
</html>

CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: #0e183a;
}

header{
    background: rgb(172, 177, 204);
    padding: 20px;
}

header > h1{
    color: #25272e;
    text-align: center;
    font-family: sans-serif;
}

.badge{
    background: red;
    font-size: 15px;
    padding: 2px 10px;
    font-family: sans-serif;
    font-weight: bold;
    color: aliceblue;
}

#user-label{
    position: absolute;
    top: 22px;
    left: -27px;
}

#comp-label{
    position: absolute;
    top: 22px;
    right: -30px;
}

.result{
    font-size: 30px;
    color: antiquewhite;
    margin: 45px;
}

.result > p{
    text-align: center;
    font-weight: bold;
    font-family: sans-serif;    
}

.choices{
    margin: 25px 0x;
    text-align: center;
}

.choice{
    border: 4px solid linen;
    display: inline-flex;
    width: 240px;
    height: 240px;
    padding: 10px;
    border-radius: 50%;
    margin: 0px 15px;  
    transition:  0.5s ease;      
}

.score-board{
    margin: 20px auto;
    border: 4px solid white;
    border-radius: 5px;
    text-align: center;
    font-family: Times New Roman;
    width: 200px;
    color: white;
    font-size: 30px;
    padding: 15px 20px;
    position: relative;
}

#action-message{
    text-align: center;
    color: antiquewhite;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 22px;
    margin-top: 38px;
}

.choice:hover{
    cursor: pointer;
    background: #1c3ca3;
}

.score-board{
    margin: 20px auto;
    border: 4px solid white;
    border-radius: 5px;
    text-align: center;
    font-family: Times New Roman;
    width: 200px;
    color: white;
    font-size: 30px;
    padding: 15px 20px;
    position: relative;
}

.gray-glow{
    border: 4px solid gray;
    box-shadow: 0 0 10px rgb(61, 68, 70);
}

.green-glow{
    border: 4px solid green;
    box-shadow: 0 0 10px #7bff00
}

.red-glow{
    border: 4px solid red;
    box-shadow: 0 0 10px #cf0101;

}

JavaScript

var userScore = 0;
var computerScore = 0;
const userScore_span = document.getElementById('user-score');
const computerScore_span = document.getElementById('computer-score');
const scoreBoard_div = document.querySelector(".score-board");
const result_p = document.querySelector(".result > p");
const rock_div = document.getElementById("rock");
const paper_div = document.getElementById("paper");
const scissors_div = document.getElementById("scissors");
const scoreBoard_Id = document.getElementById('score');

function getComputerChoice(){
    const choices = ["rock", "paper", "scissors"];
    return choices[Math.floor(Math.random() * 3)];
}

function updateScore(resultType){
    if(resultType === "tie"){  
        userScore = userScore + 1;
        userScore_span.innerHTML = userScore;
        computerScore = computerScore + 1;
        computerScore_span.innerHTML = computerScore;
        
    }else if(resultType === "userWin"){
        userScore = userScore + 1;
        userScore_span.innerHTML = userScore;       

    }else{
        computerScore = computerScore + 1;
        computerScore_span.innerHTML = computerScore;            
    }
}

function addGlow(resultType, userChoice_div){
    if(resultType === 'tie'){
        userChoice_div.classList.add('gray-glow');
        scoreBoard_Id.classList.add('gray-glow');
        setTimeout(() => userChoice_div.classList.remove('gray-glow'), 300);             
        setTimeout(() => scoreBoard_Id.classList.remove('gray-glow'), 300); 
        
    }else if(resultType === 'userWin'){        
        userChoice_div.classList.add('green-glow');
        scoreBoard_Id.classList.add('green-glow');
        setTimeout(() => scoreBoard_Id.classList.remove('green-glow'), 300);  
        setTimeout(() => userChoice_div.classList.remove('green-glow'), 300);        
        
        
    }else{
        userChoice_div.classList.add('red-glow');  
        scoreBoard_Id.classList.add('red-glow');   
        setTimeout(() =>...