Picture Frame Animated Group E (P’New) (Branch 2131)

Picture Frame Animated Group E (P’New) (Bran..

✨ PANITHAN KONGTHONG

<html><head>
<title>Picture groupE</title>
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&amp;display=swap" rel="stylesheet">

@keyframes textAnimateB{
  0% {
    transform: scale(0.9);
  }
  80%,100% {
    transform: scale(1) rotateZ(-3deg);
  }
}     
     
     .pnew{	
       position:absolute;
       width:100px;
       height:115px;
       bottom:15%;
       transform:rotatey(180deg);
       left:18%;
       z-index:0;

}
      .neay{	
       width:90px;
       height:100px;
       position:absolute;
       top:10%;
       left:30%;
       z-index:0;
      animation: spin 4.5s infinite ease-in ;
        
     }
     @keyframes spin{
       0%{transform:rotate(0deg) translatex(0px) ;}
       50%{scale(0.7) opacity:0;}
       75%{opacity:0;}
       80%{opacity:0;}
       100%{transform:rotate(-360deg) translatex(100px) scale(0.5);opacity:0;}
     }
     .por{	
       width:90px;
       height:100px;
       position:absolute;
       bottom:1%;
       left:42%;
       z-index:2;
     }
          .rarm{	
       width:70px;
       height:80px;
       position:absolute;
       bottom:5%;
       right:42%;
       z-index:0;
       animation: jump 1s infinite reverse;
     }
          .ing{	
       width:70px;
       height:80px;
       position:absolute;
       bottom:5%;
       right:46%;
       transform:rotatey(180deg);
       z-index:1;
       animation: jump 1s infinite;
     }
     @keyframes jump{
       0%,100%{
			bottom: 8%;
         animation: ease-in-out;
       }
       50%{
			bottom: 5%;
       }
     }
     .gam{	
       width:120px;
       height:130px;
       position:absolute;
       bottom:0%;
       transform: rotatey(180deg);
       left:10%;
       z-index:1;
      animation:walk 8s infinite ease-out;
     }
     @keyframes walk{
			0%{left:10%;}
         25%{
				left:35%;
            animation: ease-out;
            transform: rotatey(180deg);
            bottom: 1%;
			   width: 100px;
            height:110px; }
       	40%{
            left:90%;
 				transform: rotatey(180deg);}
         45%{
  				left:90%;
				transform: rotatey(0deg);
            width:120px;
       		height:130px;
       }
       60%{
			animation: ease-in-out;
         animation-duration
    		left: 0%;
         transform: rotatey(0deg);
       }
       75%{
				left:35%;
            animation: ease-in-out;
            transform: rotatey(0deg);
            bottom: 1%;
			   width: 100px;
            height:110px;
       }
       100%{
    		left: 90%;
         transform: rotatey(0deg);
         left:10%;
         animation: ease-in-out
       }
     }
     .mek{	
       width:95px;
       height:120px;
       position:absolute;
       bottom:1%;
       left:31%;
      transform: rotatey(180deg);
      z-index:1;
     }
          .babe{	
       width:120px;
       height:130px;
       position:absolute;
       bottom:0%;
       transform: rotatey(180deg);
       left:2%;
       z-index:1;
     }
          .top{	
       width:1px;
       height:1px;
       position:absolute;
       top:30%;
       right:50%;
       z-index:1;
       animation-name: jumpingtop;
       animation-duration: 5s;
       animation-iteration-count: infinite;
       animation-timing-function: cubic-bezier(0,.57,.68,1.01);
       transform: rotatey(180deg);
     }
     @keyframes jumpingtop{
       0%{
			top:40%;
         right:50%;
         width: 2px;
         height: 12px;
       }
       30%{
			top:20%;
       }
       40%{
         width:70px;
         height:80px;
         position:absolute;
         top:82%;
         right:49%;
       }
       50%, 60%, 70%, 90%, 100%{
			top: 80%;
         width:70px;
         height:80px;
        	right:49%;
       }
       55%, 65%, 75%, 85%, 95%{
			top: 82%;
         right:49%;
         width:70px;
         height:80px;
         animation: ease-in-out;
       }
     }
     .folk{	
       width:90px;
       height:100px;
       position:absolute;
       top:35%;
       left:0%;
       transform: rotatey(180deg);
       z-index:2;
       animation: folkjump 1s infinite;
     }    
  @keyframes folkjump{
    0%,100%{
			top: 35%;
         animation: ease-in-out;
       }
       50%{
			top: 36%;
       }
  }
  .pjaborn{	
       width:90px;
       height:100px;
       position:absolute;
       bottom:13%;
       left:38%;
       z-index:0;
     }
      	.store1{	
       width:320px;
       height:320px;
       position:absolute;
       bottom:-2%;
       left:10%;
       z-index:0;
     }
           	.store2{	
       width:300px;
       height:300px;
       position:absolute;
       bottom:1%;
       left:31%;
       z-index:0;
     }
     .moon-half{
       width:120px;
       height:120px;
       position:absolute;
       top:2%;
       left:20%;
       z-index:0;
     }

</style>
</head>
<body>
<div class="canvas">
<div class="name"><span>Group</span><span>P'New</span></div>
<div class="amongus">
<img class="pnew" src="https://cdn.discordapp.com/attachments/798210263559962624/809432958229282897/p_new.png"><img>
<img class="neay" data-pic="1" src="https://s2.gifyu.com/images/neoy.png"><img>
<img class="por" src="https://s2.gifyu.com/images/por.png"><img>
<img class="rarm" src="https://s2.gifyu.com/images/raam.png"><img>
<img class="ing" src="https://s2.gifyu.com/images/ing.png"><img>
<img class="gam" src="https://s2.gifyu.com/images/kaem.png"><img>
<img class="mek" src="https://s2.gifyu.com/images/meg.png"><img>
<img class="babe" src="https://s2.gifyu.com/images/babe.png"><img>
<img class="top" src="https://s2.gifyu.com/images/top.png"><img>
<img class="folk" src="https://s2.gifyu.com/images/folk.png"><img>
<img class="pjaborn" src="https://s2.gifyu.com/images/p-jabont.png"><img>
</div>
<div class="store">
<img class="store1" src="https://cdn.discordapp.com/attachments/798210263559962624/809434927137030144/1.png"><img>
<img class="store2" src="https://cdn.discordapp.com/attachments/798210263559962624/809434963325485076/465bfd5ee139f93d.png"><img>
</div>
<div class="moon">
<img class="moon-half" src="https://media.discordapp.net/attachments/798210263559962624/809435549244588042/82a9102512bb8cdb.png"><img>
</div>
  <audio autoplay="autoplay">
     <source src="https://multijabond.web.app/ngarnwad.mp3">
    </audio>
</div>
<script>
	function setHalfvolume(){
           var bgmusic = document.getElementById("autoplay");
           bgmusic.volume = 0.005;
     		  bgmusic.loop = true;
     }
  
    setTimeout({animation:spin},5000);
  </script>

</body></html>