CSS transition on Card hover

Hi Folks, How do get a smooth transition on a card hover to display corner shadow? I have some code below that displays the shadow when you hover, but it seems abrupt. how to add say, 0.8 secs transition to ease in/out?

''' .col{ position: relative; display: flex; flex-direction: column; } .col .card{ position: relative; width: 300px; height: 300px; margin: 40px 0; background: rgb(255, 255, 255); box-shadow: 0 0px 0px rgba(0, 0, 0, 1); display: flex; justify-content: center; transition: all 0.6s cubic-bezier( 1, 1, 1, 1); } .col .card:hover::before{ content: ''; position: absolute; bottom: 0; left: 5px; width: 30%; height: 30px; background: rgba(121, 120, 120, 0.8); transform-origin: right; transform: skewY(-4deg); transition: all 0.6s cubic-bezier( 1, 1, 1, 1); z-index: -1; filter: blur(5px); } .col .card:hover::after{ content: ''; position: absolute; bottom: 0; right: 5px; width: 30%; height: 30px; background: rgba(75, 74, 74, 0.8); box-shadow: 10px 10px 15px rgba(5px, 0, 0, 1); transition: all 0.6s cubic-bezier( 1, 1, 1, 1); transform-origin: left; transform: skewY(6deg); z-index: -1; filter: blur(5px); }

<title>Document</title>

      </div>
</div>

''' cheers guys.