animations test, Client Side

animations test

<!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.