CSS Swinging animation with keydown and keyup

Question

I am trying to recreate the tiki toss game using HTML, CSS and JS.

There are 2 players

• the first player will be using the "A" key
• the second player will be using the "Right" arrow key.

The keydown will mimic the pulling of the line away from the middle, then keyup should release the line and allow it to swing back equidistant to the other direction (like a pendulum).

I have gotten the line to swing away from the middle, but I am unable to let it swing back the other way.

My markup and code

"use strict";
// console.log('connected!');

window.onload = () => {

  //add keypress to trigger swing
  document.addEventListener('keydown', keyDownHandler, false);
  document.addEventListener('keyup', keyUpHandler, false);

  let playerOnePressed = false;
  let playerTwoPressed = false;
  let lineOne = document.querySelector('.box4');
  let lineTwo = document.querySelector('.box5');

  function keyDownHandler(event) {
    if (event.keyCode == 65) {
      playerOnePressed = true;
      activateP1Swing()
    } else if (event.keyCode == 39) {
      playerTwoPressed = true;
      activateP2Swing()
    }
  }

  function activateP1Swing() {
    if (playerOnePressed) {
      lineOne.setAttribute('id', 'p1Swing');
    }
  }

  function activateP2Swing() {
    if (playerTwoPressed) {
      lineTwo.setAttribute('id', 'p2Swing');
    }
  }

  function keyUpHandler(event) {
    if (event.keyCode == 65) {
      playerOnePressed = false;
      lineOne.removeAttribute('id', 'p1Swing');
    } else if (event.keyCode == 39) {
      playerTwoPressed = false;
      lineTwo.removeAttribute('id', 'p2Swing');
    }
  }


}

h1 {
  display: inline-block;
  border-radius: 1px;
  border-style: double;
  background-color: #efefef;
  color: #000;
}

#playerTwo-nametag {
  float: right;
}

.grid-wrapper {
  margin: 3vh 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-auto-rows: 50px;
  padding-left: 10vw;
  padding-right: 10vw;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 16;
  grid-row-start: 1;
  grid-row-end: 2;
  background-color: chocolate;
}

.box2 {
  grid-column-start: 8;
  grid-column-end: 9;
  grid-row-start: 2;
  grid-row-end: 9;
  background-color: chocolate;
}

.box3 {
  grid-column-start: 6;
  grid-column-end: 11;
  grid-row-start: 9;
  grid-row-end: 10;
  background-color: chocolate;
}

.line {
  height: 300px;
  width: 5px;
  background: brown;
}

@keyframes swinging1 {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(-90deg);
  }
}

@keyframes swinging2 {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-90deg);
  }
  50% {
    transform: rotate(90deg);
  }
}

.box4 {
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 2;
  grid-row-end: 3;
  transform-origin: 0 0;
}

.box5 {
  grid-column-start: 13;
  grid-column-end: 14;
  grid-row-start: 2;
  grid-row-end: 3;
  transform-origin: 0 0;
}

#p1Swing {
  animation: swinging1 2.5s ease-in-out forwards infinite;
}

#p2Swing {
  animation: swinging2 2.5s ease-in-out forwards infinite;
}

<!-- Creating nametags for Player 1 and Player 2 -->
<div id="header">
  <h1 id="playerOne-nametag">Player 1</h1>
  <h1 id="playerTwo-nametag">Player 2</h1>
</div>

<div class="grid-wrapper">
  <div class="grid">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4">
      <div class="line" id="line1"></div>
    </div>
    <div class="box5">
      <div class="line" id="line2"></div>
    </div>
  </div>
</div>

you can access the code in Code Pen

Could you give me suggestions on how to create the "swinging back" effect? I can't find anything online (or my search skills aren't good). Are there any functions that can capture the duration of keydown? I was thinking if I could use the keydown duration to determine the distance of the swing back when keyup event is heard.