SOURCE

document.getElementsByClassName('button')[0].onclick = function () {
    console.log(1)
    document.getElementById('animat').className='show'
    document.getElementById('animat').style.opacity='1'
}

<div class="button ">按钮</div>

<div>
    <div class="a" style="height: 35px;width:300px;background:orangered;border-radius: 4px;" id="animat"></div>
</div>

.button {
    width: 100px;
    height: 30px;
}

#animat{
    position:relative;
    opacity: 0;
}
.show {
    animation:show 1.5s ease-in-out;
    opacity: 1;
}
.hide {
    animation:hide 1s ease-in-out;
}

@keyframes show
{
    0%{
        transform: scale(1.5); 
        opacity: 0;
    }
    100%{
        transform: scale(1); 
        opacity: 1;
    }

}
           
@keyframes hide
{
    0%{
        transform: scale(1);
    }
    100%{
        transform: scale(1.5);
        opacity: 0;
    }

}