Blackhole_anim.html
<!DOCTYPE html> <html> <head> <style> @-webkit-keyframes rotates{from{-webkit-transform:rotate(0deg) scale(0)}to{-webkit-transform:rotate(360deg) scale(3.2)} @-ms-keyframes rotates{from{-ms-transform:rotate(0deg)}to{-ms-transform:rotate(360deg)}} @-moz-keyframes rotates{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}} @-o-keyframes rotates{from{-o-transform:rotate(0deg)}to{-o-transform:rotate(360deg)}} </style> </head> <body> <img id="hole" src="https://bdaladdin.duapp.com/blackhole/img/blackhole.png" class="ops-blackhole" style="display: block; -webkit-animation: rotates 5s cubic-bezier(0.6,-0.5,0.4,1) 1 forwards; -webkit-animation-play-state: paused; position: fixed; z-index: 302; left: 319px; top: 170.5px; padding: 0px;"> infinite linear cubic-bezier(0.6,-0.5,0.4,1.4) <script> window.setTimeout(function (){ showPanel=document.getElementById("hole"); showPanel.style.webkitAnimationPlayState="paused" showPanel.style.webkitAnimationTimingFunction="cubic-bezier(0,0,0.5,1)" showPanel.style.webkitAnimationDuration="5s" document.styleSheets[0].rules[0].deleteRule('0%') document.styleSheets[0].rules[0].deleteRule('100%') document.styleSheets[0].rules[0].appendRule("0% { transform: rotate(360deg) scale(4.2); }") document.styleSheets[0].rules[0].appendRule("100% { transform: rotate(0deg) scale(0); }") showPanel.style.webkitAnimationPlayState="running" console.log("change") },5000) document.onmousedown = click function click(event) { var e = event || window.event; console.log(e.clientX+' '+e.clientY) console.log((e.clientX-400)+' '+ (e.clientY-400)) showPanel=document.getElementById("hole"); showPanel.style.left=(e.clientX-400)+"px" showPanel.style.top=(e.clientY-400)+"px" showPanel.style.webkitAnimationPlayState="running" } </script> </body> </html>
update
<!DOCTYPE html> <html> <head> <style> @-webkit-keyframes rotates { 0% {-webkit-transform:rotate(0deg) scale(0)} 30% {-webkit-transform:rotate(180deg) scale(1)} 50% {-webkit-transform:rotate(280deg) scale(2.5)} 70% {-webkit-transform:rotate(420deg) scale(3)} 100% {-webkit-transform:rotate(720deg) scale(0)} } @-ms-keyframes rotates{from{-ms-transform:rotate(0deg)}to{-ms-transform:rotate(360deg)}} @-moz-keyframes rotates{from{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(360deg)}} @-o-keyframes rotates{from{-o-transform:rotate(0deg)}to{-o-transform:rotate(360deg)}} </style> </head> <body> <!-- https://bdaladdin.duapp.com/blackhole/ --> <img id="hole" src="img/blackhole.png" class="ops-blackhole" style="display: none; -webkit-animation: rotates 2.5s linear infinite forwards; -webkit-animation-play-state: paused; position: fixed; z-index: 302; left: 319px; top: 170.5px; padding: 0px;"> infinite linear cubic-bezier(0.6,-0.5,0.4,1.4) <script> document.onmousedown = click function click(event) { var e = event || window.event; console.log(e.clientX+' '+e.clientY) console.log((e.clientX-400)+' '+ (e.clientY-400)) showPanel=document.getElementById("hole"); if(showPanel.style.webkitAnimationPlayState=="paused"){ showPanel.style.left=(e.clientX-400)+"px" showPanel.style.top=(e.clientY-400)+"px" showPanel.style.webkitAnimationPlayState="running" showPanel.style.display="block" var timer = setInterval(function(){ showPanel.style.webkitAnimationPlayState="paused" showPanel.style.display="none" clearInterval(timer); console.log("in timer") },2500); } } </script> </body> </html>