fantasticly lovely

1 files changed, 165 insertions, 17 deletions

diff --git a/lovely/style.css b/lovely/style.css
index 34f20aa..b3b7619 100644
--- a/lovely/style.css
+++ b/lovely/style.css
@@ -1,3 +1,50 @@
+div {    animation-name: shake;
+    animation-duration: 100ms;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+p {
+    -webkit-animation-name: spin;
+    -webkit-animation-duration: 4000ms;
+    -webkit-animation-iteration-count: infinite;
+    -webkit-animation-timing-function: linear;
+    -moz-animation-name: spin;
+    -moz-animation-duration: 4000ms;
+    -moz-animation-iteration-count: infinite;
+    -moz-animation-timing-function: linear;
+    -ms-animation-name: spin;
+    -ms-animation-duration: 4000ms;
+    -ms-animation-iteration-count: infinite;
+    -ms-animation-timing-function: linear;
+    
+    animation-name: spin;
+    animation-duration: 4000ms;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+@-ms-keyframes spin {
+    from { -ms-transform: rotate(0deg); font-size: 8pt; }
+    to { -ms-transform: rotate(360deg); font-size: 300%; }
+}
+@-moz-keyframes spin {
+    from { -moz-transform: rotate(0deg); font-size: 8pt; }
+    to { -moz-transform: rotate(360deg); font-size: 300%; }
+}
+@-webkit-keyframes spin {
+    from { -webkit-transform: rotate(0deg); font-size: 8pt; }
+    to { -webkit-transform: rotate(360deg); font-size: 300%; }
+}
+@keyframes spin {
+    from {
+        transform:rotate(0deg);
+	font-size: 8pt;
+    }
+    to {
+        transform:rotate(360deg);
+	font-size: 300%; 
+    }
+}
 body {
 	background-color: black;
 	color: lime;
@@ -34,10 +81,6 @@ h1 {
 	max-width: 100ex;
 	margin: auto;
 }
-.wrapper div:hover {
-	columns: 65535
-    	animation: spinneryay 5s linear infinite;
-}
 #footer {
 	line-height: 1.2;
 	font-size: 80%;
@@ -114,10 +157,13 @@ a:active {
 .good {
 	color: lime;
 }
+@keyframes yaay {
+    from {transform:rotate(0deg);}
+    to {transform:rotate(360deg);}
+}
 @keyframes shake { 
-   0%, 100% {transform: rotate(0deg);} 
-   10%, 30%, 50%, 70%, 90% {transform: rotate(-3deg);} 
-   20%, 40%, 60%, 80% {transform: rotate(3deg);} 
+	from {font-size: 100%;}
+	to {font-size: 500%; }
 }
 
 /* from https://gist.githubusercontent.com/ammaraskar/5558871/raw/b3f43cb5e9f67216b2287de7a6e92da8cb4af0f4/april-fools.css */
@@ -135,7 +181,9 @@ a:active {
 
 
 body {
-    animation: spin 5s linear infinite;
+    animation-name: yaay;
+    animation-duration: 5s;
+    animation-iteration-count: 2;
   transform: rotate(180deg);
 }
 
@@ -170,17 +218,13 @@ html {
   cursor:none !important;
 }
 
-p {
-  cursor: help;
-  animation: spin 1s linear infinite; 
-}
 /*
   slowly grow text
 */
-p {
-  animation: grow 20s ease-in;
-  -moz-animation: grow 20s ease-in;
-}
+/*p {*/
+  /*animation: grow 120s ease-in;*/
+  /*-moz-animation: grow 120s ease-in;*/
+/*}*/
 
 /*
   Spin dev tools round and round
@@ -254,7 +298,7 @@ html {
 body {
   transform-origin: bottom center;
   bkit-transform: rotateX(-80deg);
-  animation: fall 60s ease-in;
+  animation: fall 480s ease-in;
   transform-origin: bottom center;
   transform: rotateX(-90deg);
 }
@@ -477,3 +521,107 @@ transform: rotate(10deg);
   0%   { font-size: none; }
   100%   { font-size: 80pt; }
 }
+
+@keyframes yipee {
+0% {background-color: black; transform: rotate(0deg);}
+1% {background-color: black; transform: rotate(3deg);}
+2% {background-color: black; transform: rotate(7deg);}
+3% {background-color: black; transform: rotate(10deg);}
+4% {background-color: black; transform: rotate(14deg);}
+5% {background-color: black; transform: rotate(18deg);}
+6% {background-color: black; transform: rotate(21deg);}
+7% {background-color: black; transform: rotate(25deg);}
+8% {background-color: black; transform: rotate(28deg);}
+9% {background-color: black; transform: rotate(32deg);}
+10% {background-color: black; transform: rotate(36deg);}
+11% {background-color: black; transform: rotate(39deg);}
+12% {background-color: black; transform: rotate(43deg);}
+13% {background-color: black; transform: rotate(46deg);}
+14% {background-color: black; transform: rotate(50deg);}
+15% {background-color: black; transform: rotate(54deg);}
+16% {background-color: black; transform: rotate(57deg);}
+17% {background-color: black; transform: rotate(61deg);}
+18% {background-color: black; transform: rotate(64deg);}
+19% {background-color: black; transform: rotate(68deg);}
+20% {background-color: black; transform: rotate(72deg);}
+21% {background-color: black; transform: rotate(75deg);}
+22% {background-color: black; transform: rotate(79deg);}
+23% {background-color: black; transform: rotate(82deg);}
+24% {background-color: black; transform: rotate(86deg);}
+25% {background-color: black; transform: rotate(90deg);}
+26% {background-color: black; transform: rotate(93deg);}
+27% {background-color: black; transform: rotate(97deg);}
+28% {background-color: black; transform: rotate(100deg);}
+29% {background-color: black; transform: rotate(104deg);}
+30% {background-color: black; transform: rotate(108deg);}
+31% {background-color: black; transform: rotate(111deg);}
+32% {background-color: black; transform: rotate(115deg);}
+33% {background-color: black; transform: rotate(118deg);}
+34% {background-color: black; transform: rotate(122deg);}
+35% {background-color: black; transform: rotate(126deg);}
+36% {background-color: black; transform: rotate(129deg);}
+37% {background-color: black; transform: rotate(133deg);}
+38% {background-color: black; transform: rotate(136deg);}
+39% {background-color: black; transform: rotate(140deg);}
+40% {background-color: black; transform: rotate(144deg);}
+41% {background-color: black; transform: rotate(147deg);}
+42% {background-color: black; transform: rotate(151deg);}
+43% {background-color: black; transform: rotate(154deg);}
+44% {background-color: black; transform: rotate(158deg);}
+45% {background-color: black; transform: rotate(162deg);}
+46% {background-color: black; transform: rotate(165deg);}
+47% {background-color: black; transform: rotate(169deg);}
+48% {background-color: black; transform: rotate(172deg);}
+49% {background-color: black; transform: rotate(176deg);}
+50% {background-color: black; transform: rotate(180deg);}
+51% {background-color: black; transform: rotate(176deg);}
+52% {background-color: black; transform: rotate(172deg);}
+53% {background-color: black; transform: rotate(169deg);}
+54% {background-color: black; transform: rotate(165deg);}
+55% {background-color: black; transform: rotate(162deg);}
+56% {background-color: black; transform: rotate(158deg);}
+57% {background-color: black; transform: rotate(154deg);}
+58% {background-color: black; transform: rotate(151deg);}
+59% {background-color: black; transform: rotate(147deg);}
+60% {background-color: black; transform: rotate(144deg);}
+61% {background-color: black; transform: rotate(140deg);}
+62% {background-color: black; transform: rotate(136deg);}
+63% {background-color: black; transform: rotate(133deg);}
+64% {background-color: black; transform: rotate(129deg);}
+65% {background-color: black; transform: rotate(126deg);}
+66% {background-color: black; transform: rotate(122deg);}
+67% {background-color: black; transform: rotate(118deg);}
+68% {background-color: black; transform: rotate(115deg);}
+69% {background-color: black; transform: rotate(111deg);}
+70% {background-color: black; transform: rotate(108deg);}
+71% {background-color: black; transform: rotate(104deg);}
+72% {background-color: black; transform: rotate(100deg);}
+73% {background-color: black; transform: rotate(97deg);}
+74% {background-color: black; transform: rotate(93deg);}
+75% {background-color: black; transform: rotate(90deg);}
+76% {background-color: black; transform: rotate(86deg);}
+77% {background-color: black; transform: rotate(82deg);}
+78% {background-color: black; transform: rotate(79deg);}
+79% {background-color: black; transform: rotate(75deg);}
+80% {background-color: black; transform: rotate(72deg);}
+81% {background-color: black; transform: rotate(68deg);}
+82% {background-color: black; transform: rotate(64deg);}
+83% {background-color: black; transform: rotate(61deg);}
+84% {background-color: black; transform: rotate(57deg);}
+85% {background-color: black; transform: rotate(54deg);}
+86% {background-color: black; transform: rotate(50deg);}
+87% {background-color: black; transform: rotate(46deg);}
+88% {background-color: black; transform: rotate(43deg);}
+89% {background-color: black; transform: rotate(39deg);}
+90% {background-color: black; transform: rotate(36deg);}
+91% {background-color: black; transform: rotate(32deg);}
+92% {background-color: black; transform: rotate(28deg);}
+93% {background-color: black; transform: rotate(25deg);}
+94% {background-color: black; transform: rotate(21deg);}
+95% {background-color: black; transform: rotate(18deg);}
+96% {background-color: black; transform: rotate(14deg);}
+97% {background-color: black; transform: rotate(10deg);}
+98% {background-color: black; transform: rotate(7deg);}
+99% {background-color: black; transform: rotate(3deg);}
+100% {background-color: black; transform: rotate(0deg);}
+}