html - function to change opacity after element.animate in javascript?

Question

why is the opacity not returning to 0 in function resetImg() ?

it returns the position correctly when function is called. I'm trying to do this without jquery at the moment... i'm trying to get the animation part down before implementing into my full game.

Animation = https://codepen.io/hamisakim/pen/oNzyKeR

Full game = https://codepen.io/hamisakim/pen/ExgLrKV?editors=1011

HTML

<h1 id='Main Header'> Rock Paper Scissors </h1>
<h2> Choose below to test your luck </h2>
<div class='buttons'>
  <button id='rock'> ROCK </button>
  <button id='paper'>PAPER </button>
  <button id='scissors'> SCISSORS</button>
</div>
<h1 id='result'> </h1>

<div id='choiceImages'> 
<image id='playerImg' src='https://www.rock-paper-scissors-game.com/i/rock.png'>
  
  <image id='computerImg' src='https://www.rock-paper-scissors-game.com/i/scissors.png'>
    </div>

CSS

body{text-align: center;}

.buttons {
  position:relative;
}

#computerImg{
max-width: 30%; 
display: inline-block; 
padding: 0px 0px 0px 35px;
position:relative;
 z-index: -1;
}


#playerImg { 
max-width: 30%; 
display: inline-block; 
padding: 0px 35px 0px 0px;
position:relative;
  z-index: 1;
}

JAVASCRIPT

function playerWinAnimate() {
document.getElementById('playerImg').animate([
  //keyframes
  {transform : 'translateX(0px)'}, 
  {transform : 'translateX(250px)'}
],
 {
  duration: 1000,
  iterations: 1,   
  fill: 'forwards',
  
},)
document.getElementById('computerImg').animate([
  {opacity:1},
  {opacity:0}, ],
{duration:1000,
 delay: 1000,
iterations: 1,
fill: 'forwards'
}, )                                      
}
playerWinAnimate();

function resetImg(){
    document.getElementById('computerImg').style.opacity = 'initial';
  document.getElementById('playerImg').style.left = '-200px';

}

document.getElementById("rock").addEventListener("click", resetImg);
document.getElementById("paper").addEventListener("click", resetImg);
document.getElementById("scissors").addEventListener("click", resetImg);

Answer 1

等待大神答复