Meine Codepens ,My Codepens ,simple animation über button anklickbar

tobi_animationm.php

Quell Code

<!doctype html>
<html lang="de">
  <head>
    <style>
      
      *{
  margin:0;
  padding:0;
}
body{
  height:100vh;
  background:lightgrey;
}
nav{
  background:black;
  height:30px;
}
nav ul{
  display:flex;
  list-style:none;
    height:100%;
}
nav ul li{
  flex:1;
  border:1px solid white;
text-align:center;
}
button{
  height:100%;
  width:99%;
}

p{
  width:100%;
  height:50%;
  display:flex;
}
p span{
  flex:1;
  font-size:calc(100vw / 5);
  font-weight:900;
}
.dreh{
  animation:drehen 1s linear infinite;
  transform:rotate(0deg);
}

.lauf{
  animation:laufen 2s linear infinite;
  left:0;
  position:relative;
}


@keyframes drehen{
  0%{
   
    transform:rotate(0deg);
    transform:origin(50%, 50%);
  }
  100%{
    transform:rotate(360deg);
    transform:origin(50%, 50%);
  }
}

@keyframes laufen{
  0%{
   
   left:-100vw;
  }
  100%{
   left:100vw;
  }
}

      
    </style>
  </head>
  <body>
    
    <nav>
   <ul>
     <li><button id="was1">Drehen</button></li>
     <li><button id="was2">wackeln</button></li>
     <li><button id="was3">laufen</button></li>
     <li><button id="was4">Disko</button></li>
     
      </ul>
    </nav>
    <main>
    <p>
      <span>H</span>
      <span>a</span> 
      <span>l</span> 
      <span>l</span> 
      <span>o</span> 
    </p>
    <p>
       <span>T</span> 
      <span>o</span> 
      <span>b</span> 
      <span>i</span> 
      <span>!</span>
    </p>
    </main>
    
    <script>
      
       

function getRgbaColor(alpha) { 
if(alpha == null)
    alpha = 1; 
    var mainAarry = ["rgba(","redVal",",","greenVal",",","blueVal",",",alpha,")"],
        index = 1, 
        result;
        while (index < 6) { 
            var rand = Math.floor(Math.random()*255);
            mainAarry[index] = rand;
            index +=2; 
        }
        result = mainAarry.join("");
        return result; 
};

function rotate(){
  ran=Math.round(Math.random() * (359 - 0));
  return ran;
}

function random_position(y,x){
    randleft = Math.floor( Math.random() * (window.innerWidth-y) + 1 );
    randtop = Math.floor( Math.random() * (window.innerHeight-x) + 1 ); 
    return {'le':randleft,'to':randtop};
}

var timer,timer1;
elbu=document.querySelectorAll('button');
elbu.forEach(function(f,g){
  f.addEventListener('click',function(h){
      elp=document.querySelectorAll('p span');
      if(g==0){
          elp.forEach(function(i){
               i.setAttribute("class", "dreh");
          })
      }else if(g==1){
      timer1=setInterval(function(){
          elp.forEach(function(i){
              //i.setAttribute("class", "dreh");
              var toppx=random_position(30,15);
              var randleft=toppx['le'];
              var randtop=toppx['to'];
              i.style.position='absolute';
              i.style.transition='all 1s';
              i.style.top=randtop+'px';
              i.style.left=randleft+'px';  
          })
      },1000);
    }else if(g==2){
        elp.forEach(function(i){
        i.setAttribute("class", "lauf");
    })
    }else if(g==3){
       timer=setInterval(function(){
           elp.forEach(function(d){
              d.style.background=getRgbaColor()
           })
       },1000)
    }
    if(g!=3){
          clearInterval(timer);   
    }
    if(g!=1){
          clearInterval(timer1);   
          elp.forEach(function(x){
              x.removeAttribute("style");
          })
    }
    if(g!=0){
        elp.forEach(function(x){
        dr=x.classList.contains("dreh");
        if(dr==true){
            x.removeAttribute("class");
        }
       })
    }
    if(g!=2){
       elp.forEach(function(x){
        dr=x.classList.contains("lauf");
            if(dr==true){
              x.removeAttribute("class");
            }
       })
    }
  })
})



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