OLD | NEW |
(Empty) | |
| 1 <!doctype html> |
| 2 <meta name="viewport" content="width=device-width, user-scalable=no"> |
| 3 <container id="container"></container> |
| 4 <script> |
| 5 window.measurementReady = true; |
| 6 var N = 1000; |
| 7 var duration = 1000; |
| 8 |
| 9 function startAnimation() { |
| 10 var target = document.createElement('target'); |
| 11 container.appendChild(target); |
| 12 } |
| 13 |
| 14 function startAllAnimations() { |
| 15 container.textContent = ''; |
| 16 for (var i = 0; i < N; i++) { |
| 17 startAnimation(); |
| 18 } |
| 19 } |
| 20 |
| 21 startAllAnimations(); |
| 22 setInterval(startAllAnimations, duration); |
| 23 </script> |
| 24 |
| 25 <style> |
| 26 target { |
| 27 display: inline-block; |
| 28 width: 9px; height: 9px; |
| 29 background: orange; |
| 30 -webkit-animation: anim1 1s; |
| 31 } |
| 32 @-webkit-keyframes anim1 { |
| 33 0% { opacity: 0; } |
| 34 100% { opacity: 1; } |
| 35 } |
| 36 body { |
| 37 margin: 0; |
| 38 overflow: hidden; |
| 39 } |
| 40 container { |
| 41 display: flex; |
| 42 flex-flow: row wrap; |
| 43 width: 550px; |
| 44 height: 800px; |
| 45 background: magenta; |
| 46 } |
| 47 </style> |
OLD | NEW |