Table Flip Animation Bookmarklet

bookmarklet.js

javascript:(function(){var%20bod=document.getElementsByTagName("body")[0];var%20styl=document.createElement("style");styl.textContent="@-webkit-keyframes%20rollOut%20{%200%%20{%20opacity:%201;%20-webkit-transform:%20translateX(0px)%20rotate(0deg);%20transform:%20translateX(0px)%20rotate(0deg);%20}%20100%%20{%20opacity:%200;%20-webkit-transform:%20translateX(100%)%20rotate(120deg);%20transform:%20translateX(100%)%20rotate(120deg);%20}%20}%20@keyframes%20rollOut%20{%200%%20{%20opacity:%201;%20-webkit-transform:%20translateX(0px)%20rotate(0deg);%20-ms-transform:%20translateX(0px)%20rotate(0deg);%20transform:%20translateX(0px)%20rotate(0deg);%20}%20100%%20{%20opacity:%200;%20-webkit-transform:%20translateX(100%)%20rotate(120deg);%20-ms-transform:%20translateX(100%)%20rotate(120deg);%20transform:%20translateX(100%)%20rotate(120deg);%20}%20}%20";document.body.appendChild(styl);bod.setAttribute("style","-webkit-animation-duration:1s;%20animation-duration:%201s;%20-webkit-animation-fill-mode:both;%20animation-fill-mode:%20both;%20-webkit-animation-name:rollOut;%20animation-name:rollOut;");})();

original.js

// CSS ripped off from http://daneden.github.io/animate.css/

var bod = document.getElementsByTagName("body")[0];
var styl = document.createElement("style");
styl.textContent = "@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    -ms-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    -ms-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}";


document.body.appendChild(styl);

bod.setAttribute("style", "-webkit-animation-duration:1s;
animation-duration: 1s;
-webkit-animation-fill-mode:both;
animation-fill-mode: both;
-webkit-animation-name:rollOut;
animation-name:rollOut;");