Future proof experiments with standardised CSS

* Add un-prefixed CSS for transform, perspective, transition, animation, etc. * Add px units to perspective
fofr · Jul 4, 2014 · 5335046 · 5335046
1 parent 606ae3c
commit 5335046
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 40 deletions.
diff --git a/clock/css/experiment.css b/clock/css/experiment.css
@@ -42,7 +42,7 @@ body {
     -moz-transform: rotate(3600000deg);
     -o-transform: rotate(3600000deg);
     -ms-transform: rotate(3600000deg);
-    -transform: rotate(3600000deg);
+    transform: rotate(3600000deg);
 }
 
 #clock img[src*='minute'] {

diff --git a/cube-3d/css/experiment.css b/cube-3d/css/experiment.css
@@ -1,7 +1,7 @@
 #experiment {
-  -webkit-perspective: 800;
+  -webkit-perspective: 800px;
   -webkit-perspective-origin: 50% 200px;
-  -moz-perspective: 800;
+  -moz-perspective: 800px;
   -moz-perspective-origin: 50% 200px;
   perspective: 800px;
   perspective-origin: 50% 200px;
@@ -14,10 +14,8 @@
   width: 400px;
   -webkit-transition: -webkit-transform 2s linear;
   -webkit-transform-style: preserve-3d;
-
   -moz-transition: -moz-transform 2s linear;
   -moz-transform-style: preserve-3d;
-
   transition: transform 2s linear;
   transform-style: preserve-3d;
 }

diff --git a/cube-3d/css/touch.css b/cube-3d/css/touch.css
@@ -3,14 +3,12 @@ h2 {
 }
 
 .viewport {
-    -webkit-perspective: 800;
+    -webkit-perspective: 800px;
     -webkit-perspective-origin: 50% 200px;
     -webkit-transform: scale(0.75,0.75);
-
-    -moz-perspective: 800;
+    -moz-perspective: 800px;
     -moz-perspective-origin: 50% 200px;
     -moz-transform: scale(0.75,0.75);
-
     perspective: 800px;
     perspective-origin: 50% 200px;
     transform: scale(0.75,0.75);
@@ -24,11 +22,9 @@ h2 {
     -webkit-transition: -webkit-transform 50ms linear;
     -webkit-transform-style: preserve-3d;
     -webkit-transform: rotateX(-10deg) rotateY(20deg);
-
     -moz-transition: -moz-transform 50ms linear;
     -moz-transform-style: preserve-3d;
     -moz-transform: rotateX(-10deg) rotateY(20deg);
-
     transition: transform 50ms linear;
     transform-style: preserve-3d;
     transform: rotateX(-10deg) rotateY(20deg);
@@ -108,24 +104,3 @@ object {
 object:hover {
     opacity: 1;
 }
-
-/* Zoom and blur experiment */
-/* As of June 10th 2012: filters are webkit only */
-/*************************************************/
-
-.zoom-wrapper {
-    -webkit-animation: zoom-in 5s linear infinite alternate;
-    -webkit-filter: blur(0);
-    -webkit-transform-style: preserve-3d;
-}
-
-@-webkit-keyframes zoom-in {
-    from {
-        -webkit-transform: translateZ(-1000px);
-        -webkit-filter: blur(3px);
-    }
-    to {
-        -webkit-transform: translateZ(100px);
-        -webkit-filter: blur(0);
-    }
-}
diff --git a/media-query-transitions/css/experiment.css b/media-query-transitions/css/experiment.css
@@ -55,5 +55,7 @@ section h2 {
         width: auto;
         margin: 20px;
         -webkit-transition: none; /* make transition event one direction only */
+        -moz-transition: none;
+        transition: none;
     }
 }
diff --git a/modal/css/experiment.css b/modal/css/experiment.css
@@ -37,6 +37,7 @@
     /* Default minimise animation */
     -webkit-animation: minimise 500ms linear;
     -moz-animation: minimise 500ms linear;
+    animation: minimise 500ms linear;
 
     /* Prettify */
     padding: 30px;
@@ -46,13 +47,15 @@
     background: -moz-linear-gradient(#fff, #ccc);
     background: -webkit-linear-gradient(#fff, #ccc);
     background: -o-linear-gradient(#fff, #ccc);
+    background: linear-gradient(#fff, #ccc);
     text-shadow: 0 1px 0 #fff;
 }
 
 /* Override animation on modal open */
 .modal:target > div {
     -webkit-animation-name: bounce;
     -moz-animation-name: bounce;
+    animation-name: bounce;
 }
 
 .modal h2 {
@@ -116,6 +119,34 @@
   }
 }
 
+@keyframes bounce {
+  0% {
+    transform: scale3d(0.1,0.1,1);
+    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
+  }
+  55% {
+    transform: scale3d(1.08,1.08,1);
+    box-shadow: 0 10px 20px rgba(0,0,0,0);
+  }
+  75% {
+    transform: scale3d(0.95,0.95,1);
+    box-shadow: 0 0 20px rgba(0,0,0,0.9);
+  }
+  100% {
+    transform: scale3d(1,1,1);
+    box-shadow: 0 3px 20px rgba(0,0,0,0.9);
+  }
+}
+
+@keyframes minimise {
+  0% {
+    transform: scale3d(1,1,1);
+  }
+  100% {
+    transform: scale3d(0.1,0.1,1);
+  }
+}
+
 /* Modal close link */
 .modal a[href="#close"] {
     position: absolute;
@@ -157,6 +188,7 @@
     .modal a[href="#close"]:hover:after {
     -webkit-transform: scale(1.1,1.1);
     -moz-transform: scale(1.1,1.1);
+    transform: scale(1.1,1.1);
 }
 
 .modal a[href="#close"]:focus:after {
@@ -176,6 +208,7 @@ a.openModal {
     background: -moz-linear-gradient(#fff, #ddd);
     background: -webkit-linear-gradient(#fff, #ddd);
     background: -o-linear-gradient(#fff, #ddd);
+    background: linear-gradient(#fff, #ddd);
     text-shadow: 0 1px 0 #fff;
     border: 1px solid rgba(0,0,0,0.1);
     box-shadow: 0 1px 1px rgba(0,0,0,0.3);
@@ -186,4 +219,5 @@ a.openModal:focus {
     background: -moz-linear-gradient(#fff, #ccc);
     background: -webkit-linear-gradient(#fff, #ccc);
     background: -o-linear-gradient(#fff, #ccc);
+    background: linear-gradient(#fff, #ccc);
 }
diff --git a/perspective/css/experiment.css b/perspective/css/experiment.css
@@ -2,7 +2,9 @@
   font-size: 150%;
   margin: 6em auto;
   width: 6em;
-  -webkit-perspective: 500;
+  -webkit-perspective: 500px;
+  -moz-perspective: 500px;
+  perspective: 500px;
 }
 
 .three-d {
@@ -11,16 +13,22 @@
   text-align:center;
   background-color: #ccc;
   -webkit-transform-style: preserve-3d;
+  -moz-transform-style: preserve-3d;
+  transform-style: preserve-3d;
 }
 
 #raised {
   -webkit-transform: translateZ(4em);
-   background-color: #aaa;
+  -moz-transform: translateZ(4em);
+  transform: translateZ(4em);
+  background-color: #aaa;
 }
 
 #bounce {
   -webkit-transform: translateZ(1em);
-   background-color: #999;
+  -moz-transform: translateZ(1em);
+  transform: translateZ(1em);
+  background-color: #999;
 }
 
 #perspective div {

diff --git a/sphere/css/experiment.css b/sphere/css/experiment.css
@@ -2,8 +2,9 @@
     width: 100px;
     height: 100px;
     margin: 200px auto;
-    -webkit-perspective: 800;
-    -moz-perspective: 800;
+    -webkit-perspective: 800px;
+    -moz-perspective: 800px;
+    perspective: 800px;
 }
 
 .container {
@@ -13,11 +14,14 @@
     -webkit-transform-style: preserve-3d;
     -moz-transition: -moz-transform 200ms linear;
     -moz-transform-style: preserve-3d;
+    transition: transform 200ms linear;
+    transform-style: preserve-3d;
 }
 
 .container > ul {
     -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
+    transform-style: preserve-3d;
     width: 100%;
     height: 100%;
     position: absolute;
@@ -49,6 +53,7 @@
     opacity: 0.9;
     -webkit-animation: borderRadius 5s linear infinite alternate;
     -moz-animation: borderRadius 5s linear infinite alternate;
+    animation: borderRadius 5s linear infinite alternate;
 }
 
 /* Eye */
@@ -86,17 +91,20 @@
 #sphere.contact .rotator {
     -webkit-animation: spinHorizontal 2s linear infinite;
     -moz-animation: spinHorizontal 2s linear infinite;
+    animation: spinHorizontal 2s linear infinite;
 }
 
 
 #sphere.contact ul:nth-child(1) {
     -webkit-animation: spinVerticalReverse 5s linear infinite;
     -moz-animation: spinVerticalReverse 5s linear infinite;
+    animation: spinVerticalReverse 5s linear infinite;
 }
 
 #sphere.contact ul:nth-child(4) {
     -webkit-animation: spinVertical 5s linear infinite;
     -moz-animation: spinVertical 5s linear infinite;
+    animation: spinVertical 5s linear infinite;
 }
 
 .contact .rotator {
@@ -105,6 +113,9 @@
 
     -moz-transition: -moz-transform 500ms linear;
     -moz-transform-style: preserve-3d;
+
+    transition: transform 500ms linear;
+    transform-style: preserve-3d;
 }
 
 /* Half */
@@ -148,7 +159,6 @@
   }
 }
 
-
 @-webkit-keyframes borderRadius {
   from {
     border-radius: 5px;
@@ -158,7 +168,6 @@
   }
 }
 
-
 @-moz-keyframes spinHorizontal {
   from {
     -moz-transform: rotateY(0deg);
@@ -186,7 +195,6 @@
   }
 }
 
-
 @-moz-keyframes borderRadius {
   from {
     border-radius: 5px;
@@ -196,6 +204,42 @@
   }
 }
 
+@keyframes spinHorizontal {
+  from {
+    transform: rotateY(0deg);
+  }
+  to {
+    transform: rotateY(360deg);
+  }
+}
+
+@keyframes spinVertical {
+  from {
+    transform: rotateX(0deg);
+  }
+  to {
+    transform: rotateX(360deg);
+  }
+}
+
+@keyframes spinVerticalReverse {
+  from {
+    transform: rotateX(360deg);
+  }
+  to {
+    transform: rotateX(0deg);
+  }
+}
+
+@keyframes borderRadius {
+  from {
+    border-radius: 5px;
+  }
+  to {
+    border-radius: 50px;
+  }
+}
+
 .test p {
     text-align: center;
 }