Hover animation backwards - css

Question

Is there a way to animate the "hover out" in pure CCS? In the example below, all the action post hovering is doing exactly what is suppose to do, the problem comes when the animation / transition going backwards after hovering out. I need my div "tiny" animating back the way is animating in (right now the width is going back without transition) and my whatsapp icon is doing the other way around (I need to change the opacity without fading after hovering out).
In one of my approaches, I change the animation on my div with a transition: opacity (like the WA icon), BUT did not find a way to do the bouncy effect that is required. On the other hand the icon did not respond after insert a #keyframes inside the hover action (maybe out of scope?).
body {
background-color: blue;
}
.whatsapp-icon {
position: fixed;
left: 200px;
top: 30px;
opacity: 0;
transition: opacity 0.2s;
}
.tiny:hover+.whatsapp-icon {
opacity: 1;
}
.tiny:hover {
animation: animateDiv 0.4s;
animation-fill-mode: forwards;
}
.tiny {
position: fixed;
opacity: 1;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(228, 231, 235);
border-radius: 15px;
width: 200px;
height: 100px;
box-shadow: 3px 3px 10px black;
}
.box {
position: fixed;
width: 200px;
height: 100px;
cursor: default;
}
#keyframes animateDiv {
70% {
width: 255px;
}
85% {
width: 248px;
}
100% {
width: 250px;
}
}
<script type="module" src="index.js"></script>
<div class="container">
<div class="tiny">
<a class="box" href="https://api.whatsapp.com/send?phone=+XXXXXXXX" target="_blank">
</a>
</div>
<div class="whatsapp-icon">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/240px-WhatsApp.svg.png" width="50" height="50">
</div>
</div>
Hopefully someone can give me a hint. Thx in advance.

Answer 1

Use a transition instead:
body {
background-color: blue;
}
.whatsapp-icon {
position: fixed;
left: 200px;
top: 30px;
opacity: 0;
transition: opacity 0.2s;
}
.tiny:hover+.whatsapp-icon {
opacity: 1;
}
.tiny:hover {
width: 250px;
}
.tiny {
position: fixed;
opacity: 1;
background-color: rgb(255, 255, 255);
border: 1px solid rgb(228, 231, 235);
border-radius: 15px;
width: 200px;
height: 100px;
box-shadow: 3px 3px 10px black;
transition: width 0.4s;
}
.box {
position: fixed;
width: 200px;
height: 100px;
cursor: default;
}
<script type="module" src="index.js"></script>
<div class="container">
<div class="tiny">
<a class="box" href="https://api.whatsapp.com/send?phone=+XXXXXXXX" target="_blank">
</a>
</div>
<div class="whatsapp-icon">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/WhatsApp.svg/240px-WhatsApp.svg.png" width="50" height="50">
</div>
</div>
Transitions can do/undo without the user having to show the points of change.