How to set a transition period to fluctuating grid spans in CSS

I am a new programmer looking to create a learning website with a good UI. I need some help setting a transition to how to my grid span. i want it to make a smooth transition when the activ div grows in size here is my code

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Undecided</title>
    <link rel="stylesheet" href="Design_Main_menu.css">
</head>
<body><div class="background">
    <div class="slideBar">
        <div class="revisionTab"></div>
        <div class="statisticsTab"></div>
        <div class="examStyleQuestionsTab"></div>
    </div>
</div></body>
<script src="JS_Main_menu.js"></script>
</html>

CSS:

body {
    margin: 0px;
}
div.background {
    height: 100vh;
    width: 100%;
    background-image: linear-gradient(to right top, rgb(0, 82, 57), rgb(0, 43, 21));
}
.slideBar {
    background-color: bisque;
    height: 75px;
    width: 98%;
    position: absolute;
    left: 1%;
    top: 1%;
    border-radius: 15px;
    outline: solid 5px #432616;
    display: grid;
    grid-template-columns: repeat(5, 20%);
}
.statisticsTab, .revisionTab, .examStyleQuestionsTab {
    background-color: #432616;
    border-radius: 15px;
    margin: 5px;
}
.statisticsTab:hover, .revisionTab:hover, .examStyleQuestionsTab:hover {
    grid-column: span 3;
    transition: 1s;
}