Play CSS animation on idle / user inactivity on webpage

Question

I want to play CSS animation on multiple elements with a single CSS class when the webpage is idle or the user is inactive for 3 seconds. I have tried javascript function. It works fine for 1st element only. I am just a beginner in JS. I have also tried querySelectorAll but got javascript error.

let timer,
currSeconds=0;
function resetTimer() {
  /* Hide the timer text */
  document.querySelector(".timertext").style.animation='none';
  /* Clear the previous interval */
  clearInterval(timer);
  /* Reset the seconds of the timer */
  currSeconds=0;
  /* Set a new interval */
  timer=setInterval(startIdleTimer, 3000);
}

// Define the events that 
// would reset the timer 
window.onload=resetTimer;
window.onmousemove=resetTimer;
window.onmousedown=resetTimer;
window.ontouchstart=resetTimer;
window.onclick=resetTimer;
window.onkeypress=resetTimer;
function startIdleTimer() {
  document.querySelector(".timertext").style.animation='shift 4s ease-in-out infinite';
}

<p class="timertext">
  ANIMATION TEXT 1
</p>

<p class="timertext">
  Animation Text 2
</p>

<p class="timertext">
  Animation Text 3
</p>