Onclick do keyframes

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>


#red {
  border: 40px solid red;
  display: inline-block;
  cursor:pointer;
}

@keyframes anime {
  100% {
    margin-left: 300px;
  }
}

</style>
</head>
<body>


<div id='red'></div>


<script>

i=0;


red.onclick=function(){
x = prompt('Keyword please');
if(x == 'ciao'){
red.style.animation='anime 3s linear forwards';
}else if(i == 0){
alert('Wrong keyword\nYou have only one more chance left');
i++;
}else if(i == 1){
alert('Oops!');
red.style.display='none';
}
}


</script>
</body>
</html>