按钮上的按钮转换：激活

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>

transition属性似乎不起作用。每当我单击按钮时，它都会立即跳入活动课堂，而不会延迟或过渡。当我单击按钮时，如何使按钮变淡/缓入？