Check out this link for a different approach. I made some changes to your code to make it functional. While it may not match the exact example, it demonstrates how you can animate your chat box to appear and disappear.
Using the display css property to hide and show elements doesn't allow for smooth animations. Instead, try using properties like opacity, height, and width to create a shrinking effect when hiding and expanding effect when showing.
.form-box {
margin: 16px auto;
font-size: 16px;
border-radius: 9px;
position: fixed;
opacity: 0;
overflow: hidden;
bottom: 0;
right: 10px;
transform: translate(-50%,-50%);
width: 30px;
height: 30px;
background: #fff;
border: 1px solid rgba(0,0,0,0.1);
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
box-sizing: border-box;
background-color: #f5f5f7;
transition: all .25s ease-in-out;
}
.form-box.open {
transform: translate(10px, -70px);
height: 490px;
width: 366px;
opacity: 1;
}
If you're not using styles to hide and show elements, you can toggle a class to achieve the same effect. Below is the change I applied to your myFunction function to incorporate this class toggling:
if (x.classList.contains('open')) {
x.classList.remove("open");
} else {
x.classList.add("open");
document.getElementById("test").focus();
}