Button that starts animation

Hi, I’m very beginner and want to make simple map with button that starts simple animation.
I know that my code is such a mess, but I tried many ways to do it and code from tutorial.
I stucked in making a script that starts animation.

I made a prototype in adobe xd map animation - YouTube

Could you help me with that?

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
h2 {
  font-size: 24px;
  width: 380px;
  position:relative; 
  left:-370px;
  color: white;
   line-height: 0.5;
}
#zdj {
	border-radius: 20px;
	padding: 10px;
  width: 380px;
  position:relative; 
  left:-380px;
}
p {
  width: 380px;
  position:relative; 
  left:-370px;
  color: white;
    line-height: 0.5;
	font-size: 18px;
}
#bt1 {
	  position: absolute;
  width: 40px;
  left: 220px;
  top: 350px;
}
.mapa {
  position: absolute;
  left: calc(30% - 80px);
  top: calc(30% - 80px);
  z-index: 100; 
}
.square {
  position: relative;
  height: 430px;
}
.center,
.right {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #ffd500;
}
.right {
  width: 20px;
  border-radius: 0 20px 20px 0;
  left:-35px;
  transform: translateX(80px);
  -webkit-animation: right-animate 1s ease forwards reverse;
  animation: right-animate 1s ease forwards reverse;
  -webkit-animation-play-state: paused;

}
.center {
  left: -17px;
  width: 3px;
  transform: scaleX(60);
  transform-origin: left;
  -webkit-animation: center-animate 1s ease forwards reverse;
  animation: center-animate 1s ease forwards reverse;
  -webkit-animation-play-state: paused;

}
@-webkit-keyframes right-animate {
  0% {
    transform: translateX(490px);
  }
  100% {
    transform: translateX(20px);
  }
}
@-webkit-keyframes center-animate {
  0% {
    transform: scaleX(158);
  }
  100% {
    transform: scaleX(1);
  }
}
.square {
  position: absolute;
  left: calc(51% - 80px);
  top: calc(33% - 56px);
}
</style>

</head>
<body>
<div class="mapa">
<img src="mapa.png">
<img src="btn.png" id="bt1" onclick="ani()">
</div>
<div class="square">
 <div id="target">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right">
	<img src="unnamed.jpg" id="zdj">
	<h2 id="txt">Parafia Wszystkich Świętych</h2>
	<p id="txt">MYSŁOWICE</p>
	<p id="txt" style="color:DodgerBlue"><a href="https://oswietleniesakralne.pl/realizacje">Galeria ></a></p>
	</div>
	</div>
<script type="text/javascript">
    function ani() {
	document.getElementById("target").style.animation = "center-animate 1s ease forwards reverse";
    }
  </script>
</body>
</html>