Button transition on button:active

Question

*{
    margin: 0;
    padding: 0;
}

body{
    height: 100vh;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EFEFEF;
}

button{
    transition: ease-in 1s;
    cursor: pointer;
    font-family: 'Rubik', sans-serif;
    outline: none;
    padding: 3em;
    border: none;
    border-radius: 10px;
    box-shadow: 5px 5px 10px #D6D6D6,
                -5px -5px 10px rgb(255, 255, 255);
}

button:active{
    background: linear-gradient(145deg, #D7D7D7, #F7F7F7);
    box-shadow: inset 5px 5px 10px #D6D6D6,
                -5px -5px 10px rgb(255, 255, 255);
}

<button><h1>Yash Burshe</h1></button>

The transition property doesn't seem to work. Whenever I click the button it jumps straight into the active class without a delay or transition. How do I make it so when I click on the button, the button:active fades in/eases in?