Skip to content

Instantly share code, notes, and snippets.

@UnforeseenOcean
Created July 24, 2019 05:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save UnforeseenOcean/5a5332b57f681587b55aa7c0b033e7d1 to your computer and use it in GitHub Desktop.
Save UnforeseenOcean/5a5332b57f681587b55aa7c0b033e7d1 to your computer and use it in GitHub Desktop.
Cause gravitational collapse
var anim="@keyframes sigma{0%{transform:scale(1,1);opacity:0.95;}99.9%{transform:scale(0,0)rotate3d(1,1,1,180deg);}100%{opacity:0;}}",head=document.head||document.getElementsByTagName('head')[0],style=document.createElement('style');head.appendChild(style);var e=document.body.getElementsByTagName('*');style.type='text/css';if(style.styleSheet){style.styleSheet.cssText = anim;}else{style.appendChild(document.createTextNode(anim));}for(var i=0;i<e.length;i++){e[i].setAttribute("style","animation:sigma 10s 1 ease-out forwards;transform-origin:center center;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;")};
@UnforeseenOcean
Copy link
Author

UnforeseenOcean commented Jul 24, 2019

Update: More elaborate animation, may cause browser crash

var anim="@keyframes sigma{0%{transform-origin: center center;transform:scale(1,1);opacity:1;}1%{transform-origin: center center;transform:scale(2,2);opacity:1;}3%{transform-origin: center center;transform:scale(0.8,-1);opacity:1;}5%{transform-origin: center center;transform:scale(2.1,3);opacity:1;}7%{transform-origin: center center;transform:scale(0.2,-2);opacity:1;}9%{transform-origin: center center;transform:scale(3,0.2);opacity:1;}11%{transform-origin: center center;transform:scale(-1,3);opacity:1;}13%{transform-origin: center center;transform:scale(2,3);opacity:1;}65%{animation-timing-function: ease-out;transform-origin: center center;transform:scale(0.01,0.01);opacity:1;}90%{transform-origin: center center;transform:scale(0.01,0.01);opacity:1;}95%{transform-origin: center center;transform:scale(0.01,0.01);opacity:1;animation-timing-function: ease-out;}99.9%{transform-origin: center center;animation-timing-function: ease-out;transform:scale(3,3);opacity: 0;}100%{transform-origin: center center;opacity:0;display:block;width:0;height:0;}}",head=document.head||document.getElementsByTagName('head')[0],style=document.createElement('style');head.appendChild(style);var e=document.getElementsByTagName('*');style.type='text/css';if(style.styleSheet){style.styleSheet.cssText = anim;}else{style.appendChild(document.createTextNode(anim));}for(var i=0;i<e.length;i++){e[i].setAttribute("style","animation:sigma 10s 1 ease-out forwards;transform-origin:center center;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;")};

Small edit to prevent it from entirely destroying the body

var anim="@keyframes sigma{0%{transform-origin: center center;transform:scale(1,1);opacity:1;}1%{transform-origin: center center;transform:scale(2,2);opacity:1;}3%{transform-origin: center center;transform:scale(0.8,-1);opacity:1;}5%{transform-origin: center center;transform:scale(2.1,3);opacity:1;}7%{transform-origin: center center;transform:scale(0.2,-2);opacity:1;}9%{transform-origin: center center;transform:scale(3,0.2);opacity:1;}11%{transform-origin: center center;transform:scale(-1,3);opacity:1;}13%{transform-origin: center center;transform:scale(2,3);opacity:1;}65%{animation-timing-function: ease-out;transform-origin: center center;transform:scale(0.01,0.01);opacity:1;}90%{transform-origin: center center;transform:scale(0.01,0.01);opacity:1;}95%{transform-origin: center center;transform:scale(0.01,0.01);opacity:1;animation-timing-function: ease-out;}99.9%{transform-origin: center center;animation-timing-function: ease-out;transform:scale(3,3);opacity: 0;}100%{transform-origin: center center;opacity:0;display:block;width:0;height:0;}}",head=document.head||document.getElementsByTagName('head')[0],style=document.createElement('style');head.appendChild(style);var e=document.getElementsByTagName('div');style.type='text/css';if(style.styleSheet){style.styleSheet.cssText = anim;}else{style.appendChild(document.createTextNode(anim));}for(var i=0;i<e.length;i++){e[i].setAttribute("style","animation:sigma 10s 1 ease-out forwards;transform-origin:center center;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;")};

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment