Toogle and background JavaScript

I'm stuck with a problem while learning JavaScript. I want to make an animation when I turn my div on and when I turn it off by clicking the button but I only have an animation when I turn on my div but I can't make an animation when I turn it off how can I do it?
And I have another problem how can I disable my div not only by clicking "x" but when I click anywhere on the screen without that div.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

let btn = document.getElementById('btn-close');
let fo = document.getElementById('fo');
let btnk = document.getElementById('btnk');
let btnk1 = document.getElementById('btnk1');
let btnk2 = document.getElementById('btnk2');
let btnk3 = document.getElementById('btnk3');
fo.style = "display: block;"
fo.classList.toggle("fo");
btn.addEventListener('click',function(){
    fo.classList.toggle("fo");
});
btnk.addEventListener('click',function(){
    fo.classList.toggle("fo");
});
btnk1.addEventListener('click',function(){
    fo.classList.toggle("fo");
});
btnk2.addEventListener('click',function(){
    fo.classList.toggle("fo");
});
btnk3.addEventListener('click',function(){
    fo.classList.toggle("fo");
});

<!-- language: lang-css -->

.fo{
  position: fixed;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
  display: none;
  animation: ani 0.5s ease;
}
.btn-form-close {
    border: 0;
    font-size: 3rem;
    position: absolute;
    top: -2%;
    width: 0;
    height: 0;
    right: 10%;
    line-height: normal;
    cursor: pointer;
}
@keyframes ani {
    0% {
        transform: translateX(-850px);
    }
    100%{
        transform: translateX(0px);
    }
}
@keyframes ani2 {
    0% {
        transform: translateX(0px);
    }
    100%{
        transform: translateX(850px);
    }
}

<!-- language: lang-html -->

<div id="fo" class="fo">
  <div style="background-color: #000; transform: translate(50%,30%); border-radius: 30px; height: 70%; width: 50%;">
    <button id="btn-close" style="border: 0; background-color: #000; margin-top: 2%; font-size: 3rem; color: white; float: right;"><span class="btn-form-close">×</span></button>
</div>
 <button id="btnk" class="but-oferts">Otworz</button>
 <button id="btnk1" class="but-oferts">Otworz</button>
 <button id="btnk2" class="but-oferts">Otworz</button>
 <button id="btnk3" class="but-oferts">Otworz</button>

<!-- end snippet -->

Thanks for help anyone! <3

I try to use event.target but its not working.

HTML

• added data attribute to the fo div to keep track on if it is opened or closed
• changed the inner button to span to remove the line that appears on the screen next to the close menu button
• added closing div tag before the buttons to separate them from the menu

<div id="fo" class="fo" data-active="false">
  <div style="background-color: #000; transform: translate(50%,30%); border-radius: 30px; height: 70%; width: 50%;">
    <span id="btn-close" style="border: 0; background-color: #000; margin-top: 2%; font-size: 3rem; color: white; float: right;">
      <span class="btn-form-close">×</span>
    </span>
  </div>
</div>
<button id="btnk" class="but-oferts">Otworz</button>
<button id="btnk1" class="but-oferts">Otworz</button>
<button id="btnk2" class="but-oferts">Otworz</button>
<button id="btnk3" class="but-oferts">Otworz</button>

CSS

• target the fo div with the id rather than the class
• change the animation to a transition using transform and translateX. The selector used to decide if it is moving left or right (850px or -850px) is dependent on the data attribute (e.g. #fo[data-active='false'])

#fo{
  z-index: 2;
  position: fixed;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 100%;
  left: -850px;
  display: block;
  transition: transform 0.5s ease;
}
#fo[data-active='false'] {
  transform: translateX(-850px);
} 
#fo[data-active='true'] {
  transform: translateX(850px);
}
.btn-form-close {
    border: 0;
    font-size: 3rem;
    position: absolute;
    top: -2%;
    width: 0;
    height: 0;
    right: 10%;
    line-height: normal;
    cursor: pointer;
}

JS

• combine the below into a function called toggleMenu() so that you are not repeating yourself
• you do not need to toggle the class with this approach so that is removed
• store the current open state in a variable called active, then set it to its opposite with the toggleMenu() function (ternary operator)
• use this function for all four buttons

let btn = document.getElementById('btn-close');
let fo = document.getElementById('fo');
let btnk = document.getElementById('btnk');
let btnk1 = document.getElementById('btnk1');
let btnk2 = document.getElementById('btnk2');
let btnk3 = document.getElementById('btnk3');

function toggleMenu() {
  const active = fo.dataset.active
  fo.dataset.active = active == 'true' ? 'false' : 'true'
}

btn.addEventListener('click',function(){
    toggleMenu()
});
btnk.addEventListener('click',function(){
    toggleMenu()
});
btnk1.addEventListener('click',function(){
    toggleMenu()
});
btnk2.addEventListener('click',function(){
    toggleMenu()
});
btnk3.addEventListener('click',function(){
    toggleMenu()
});