Run Code
|
API
|
Code Wall
|
Users
|
Misc
|
Feedback
|
Login
|
Theme
|
Privacy
|
Patreon
animations test
<!--This code runs in your browser. If you want to see errors, examine them in your browser's developer console (usually invoked with F12)--> <!DOCTYPE html> <html> <head> <title>Web Animations API Demo</title> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.1/web-animations.min.js"></script> <style> #box { width:200px; height:200px; background-color:blue; position:relative; } </style> <script> window.addEventListener("load",function() { var element=document.getElementById("box"); var player=element.animate([ {width:"200px",opacity:1,backgroundColor:"blue"}, {width:"600px",opacity:0.5,backgroundColor:"green"}, {width:"200px",opacity:1,backgroundColor:"blue"} ],{ duration:3000, fill:"forwards", easing:"ease-in-out", iterations:Infinity }); function pause_animation() { player.pause(); } }); function do_animation() { /* player.playbackRate=rate; player.currentTime=startingPoint; */ player.onfinish=function() { window.alert(player.currentTime); }; player.oncancel=function() { window.alert("animation is cancelled"); }; } </script> </head> <body> <div id="box"></div> <p>current state: <span id="state"></span></p> <button type="button" onclick="pause_animation()">pause animation</button> </body> </html>
run
|
edit
|
history
|
help
0
Please
log in
to post a comment.
nice floppy disk animation
Coba
Half
SY Loader
rexinsrexinsrexinsrexins
Hi
Basic button example
select all checkboxes on one click
compile
90's emoji cursor
Please log in to post a comment.