| <!DOCTYPE html> |
| <html> |
| <head> |
| <style type="text/css"> |
| @keyframes animation1 { |
| 0% { transform: translateX(0px); } |
| 50% { transform: translateX(100px); } |
| 100% { transform: translateX(0px); } |
| } |
| |
| @keyframes animation2 { |
| 0% { transform: rotate(0deg); } |
| 50% { transform: rotate(180deg); } |
| 100% { transform: rotate(0deg); } |
| } |
| |
| @keyframes animation3 { |
| 0% { transform: scale(1); } |
| 50% { transform: scale(3); } |
| 100% { transform: scale(1); } |
| } |
| |
| @keyframes animation4 { |
| 0% { transform: matrix(1, 0, 0, 1, 0, 0); } |
| 50% { transform: matrix(-1, 0, 0, -1, 0, 0); } |
| 100% { transform: matrix(1, 0, 0, 1, 0, 0); } |
| } |
| |
| @keyframes animation5 { |
| 0% { transform: translateX(0px) scale(8); opacity(1); } |
| 50% { transform: translateX(100px) scale(0); opacity(0); } |
| 100% { transform: translateX(0px) scale(8); opacity(1); } |
| } |
| |
| @keyframes animation6 { |
| 0% { transform: rotate(0deg); opacity(1); } |
| 50% { transform: rotate(180deg); opacity(0); } |
| 100% { transform: rotate(0deg); opacity(1); } |
| } |
| |
| @keyframes animation7 { |
| 0% { transform: scale(1); opacity(1); } |
| 50% { transform: scale(13); opacity(0); } |
| 100% { transform: scale(1); opacity(1); } |
| } |
| |
| @keyframes animation8 { |
| 0% { transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); } |
| 50% { transform: matrix(-.5, .5, -.5, -1.2, -150, 100); opacity(0); } |
| 100% { transform: matrix(1, 0, 0, 1, 0, 0); opacity(1); } |
| } |
| |
| @keyframes animation9 { |
| 0% { transform: translateX(0px) rotate3d(0, 1, 0, 0deg); } |
| 50% { transform: translateX(100px) rotate3d(0, 1, 0, 45deg); } |
| 100% { transform: translateX(0px) rotate3d(0, 1, 0, 0deg); } |
| } |
| |
| @keyframes animation10 { |
| 0% { transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); } |
| 50% { transform: rotate(180deg) rotate3d(0, 1, 0, 45deg); } |
| 100% { transform: rotate(0deg) rotate3d(0, 1, 0, 0deg); } |
| } |
| |
| @keyframes animation11 { |
| 0% { transform: scale(1) rotate3d(0, 1, 0, 0deg); } |
| 50% { transform: scale(3) rotate3d(0, 1, 0, 45deg); } |
| 100% { transform: scale(1) rotate3d(0, 1, 0, 0deg); } |
| } |
| |
| @keyframes animation12 { |
| 0% { transform: matrix(1, 0, 0, 1, 0, 0) rotate3d(0, 1, 0, 0deg); } |
| 50% { transform: matrix(-1, .5, .2, -1, 100, 100) rotate3d(0, 1, 0, 45deg); } |
| 100% { transform: matrix(1, 0, 0, 1, 0, 0) rotate3d(0, 1, 0, 0deg); } |
| } |
| |
| @keyframes animation13 { |
| 0% { transform: translateX(0px) rotate3d(1, 1, 1, 0deg) scale(1); opacity(1); } |
| 50% { transform: translateX(100px) rotate3d(1, 1, 1, 45deg) scale(-10); opacity(0); } |
| 100% { transform: translateX(0px) rotate3d(1, 1, 1, 0deg) scale(1); opacity(1); } |
| } |
| |
| @keyframes animation14 { |
| 0% { transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ(0px); opacity(1); } |
| 50% { transform: rotate(180deg) rotate3d(1, 1, 1, 45deg) translateZ(500px); opacity(0); } |
| 100% { transform: rotate(0deg) rotate3d(1, 1, 1, 0deg) translateZ(0px); opacity(1); } |
| } |
| |
| @keyframes animation15 { |
| 0% { transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); } |
| 50% { transform: scale(3) rotate3d(1, 1, 1, 45deg); opacity(0); } |
| 100% { transform: scale(1) rotate3d(1, 1, 1, 0deg); opacity(1); } |
| } |
| |
| @keyframes animation16 { |
| 0% { transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0deg); opacity(1); } |
| 50% { transform: matrix(-1, 0, 0, 0, 0, 0) rotate3d(1, 1, 1, 45deg); opacity(0); } |
| 100% { transform: matrix(10, 0, 0, 10, 0, 0) rotate3d(1, 1, 1, 0deg); opacity(1); } |
| } |
| |
| div { |
| position: absolute; |
| transform-style: preserve-3d; |
| } |
| |
| .poster { |
| height: 50px; |
| width: 50px; |
| background-color: gray; |
| border-radius: 10px; |
| font-family: 'Georgia', serif; |
| border: 2px solid black; |
| font-size: 42px; |
| font-weight: bold; |
| text-align: center; |
| } |
| </style> |
| <script type="text/javascript"> |
| function startExperiment() |
| { |
| for (var i = 0; i < 16; ++i) { |
| var elem = document.getElementById("elem" + i.toString()); |
| elem.style.left = (i % 4 * 25 + 5).toString() + "%"; |
| elem.style.top = (Math.floor(i / 4) * 25 + 5).toString() + "%"; |
| elem.style.animationName = "animation" + (i + 1).toString(); |
| elem.style.animationDuration = "2s"; |
| elem.style.animationIterationCount = "infinite"; |
| } |
| } |
| |
| window.addEventListener('load', startExperiment, false); |
| </script> |
| </head> |
| <body> |
| <div id="elem0"><p class="poster">?</p></div> |
| <div id="elem1"><p class="poster">?</p></div> |
| <div id="elem2"><p class="poster">?</p></div> |
| <div id="elem3"><p class="poster">?</p></div> |
| <div id="elem4"><p class="poster">?</p></div> |
| <div id="elem5"><p class="poster">?</p></div> |
| <div id="elem6"><p class="poster">?</p></div> |
| <div id="elem7"><p class="poster">?</p></div> |
| <div id="elem8"><p class="poster">?</p></div> |
| <div id="elem9"><p class="poster">?</p></div> |
| <div id="elem10"><p class="poster">?</p></div> |
| <div id="elem11"><p class="poster">?</p></div> |
| <div id="elem12"><p class="poster">?</p></div> |
| <div id="elem13"><p class="poster">?</p></div> |
| <div id="elem14"><p class="poster">?</p></div> |
| <div id="elem15"><p class="poster">?</p></div> |
| </body> |
| </html> |
| |
| |
