khronosschoty
/
palemoon-dev


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
  .target {
    width: 50px;
    height: 50px;
    background: blue;
  }
  </style>
</head>
<body>
  <div id="target1" class="target"></div>
  <div id="target2" class="target"></div>
  <div id="target3" class="target"></div>
  <div id="target4" class="target"></div>
  <script>
    /* globals KeyframeEffect, Animation */
    "use strict";

    let animations = [{
      id: "target1",
      frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
      timing: {
        id: "endDelay_animation1",
        duration: 1000000,
        endDelay: 500000,
        fill: "none"
      }
    }, {
      id: "target2",
      frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
      timing: {
        id: "endDelay_animation2",
        duration: 1000000,
        endDelay: -500000,
        fill: "none"
      }
    }, {
      id: "target3",
      frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
      timing: {
        id: "endDelay_animation3",
        duration: 1000000,
        endDelay: -1500000,
        fill: "forwards"
      }
    }, {
      id: "target4",
      frames: [{ opacity: 0, offset: 0 }, { opacity: 1, offset: 1 }],
      timing: {
        id: "endDelay_animation4",
        duration: 100000,
        delay: 100000,
        endDelay: -1500000,
        fill: "forwards"
      }
    }];

    for (let {id, frames, timing} of animations) {
      let effect = new KeyframeEffect(document.getElementById(id),
                                      frames, timing);
      let animation = new Animation(effect, document.timeline);
      animation.play();
    }
  </script>
</body>
</html>