force native animation on each element

lukehaas · lukehaas · commit e6c6cdaa4348 · 2014-06-14T15:32:01.000+01:00
diff --git a/css/load1.css b/css/load1.css
@@ -23,6 +23,9 @@
   margin: 8em auto;
   position: relative;
   font-size: 11px;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
   -webkit-animation-delay: -0.16s;
   animation-delay: -0.16s;
 }
diff --git a/css/load2.css b/css/load2.css
@@ -28,6 +28,9 @@
   width: 10em;
   height: 10em;
   box-shadow: inset 0 0 0 1em #FFF;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
 }
 .load2 .loader:after {
   width: 5.2em;
diff --git a/css/load3.css b/css/load3.css
@@ -14,6 +14,9 @@
   position: relative;
   -webkit-animation: load3 1.4s infinite linear;
   animation: load3 1.4s infinite linear;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
 }
 .load3 .loader:before {
   width: 50%;
diff --git a/css/load4.css b/css/load4.css
@@ -8,6 +8,9 @@
   text-indent: -9999em;
   -webkit-animation: load4 1.3s infinite linear;
   animation: load4 1.3s infinite linear;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
 }
 @-webkit-keyframes load4 {
   0%,
diff --git a/css/load5.css b/css/load5.css
@@ -8,6 +8,9 @@
   text-indent: -9999em;
   -webkit-animation: load5 1.1s infinite ease;
   animation: load5 1.1s infinite ease;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
 }
 @-webkit-keyframes load5 {
   0%,
diff --git a/css/load6.css b/css/load6.css
@@ -7,6 +7,9 @@
   border-radius: 50%;
   margin: 0.8em auto;
   position: relative;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
   -webkit-animation: load6 1.7s infinite ease;
   animation: load6 1.7s infinite ease;
 }
diff --git a/css/load7.css b/css/load7.css
@@ -14,6 +14,9 @@
   font-size: 10px;
   position: relative;
   text-indent: -9999em;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
   -webkit-animation-delay: -0.16s;
   animation-delay: -0.16s;
 }
diff --git a/css/load8.css b/css/load8.css
@@ -7,6 +7,9 @@
   border-right: 1.1em solid rgba(255, 255, 255, 0.2);
   border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
   border-left: 1.1em solid #ffffff;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
   -webkit-animation: load8 1.1s infinite linear;
   animation: load8 1.1s infinite linear;
 }
diff --git a/css/main.css b/css/main.css
@@ -211,13 +211,6 @@ h1 {
 .load-container a:visited:hover {
   text-decoration: underline;
 }
-.loader {
-  -webkit-transform: translateZ(0);
-  -moz-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  -o-transform: translateZ(0);
-  transform: translateZ(0);
-}
 .github img {
   position: absolute;
   top: 0;
diff --git a/index.html b/index.html
@@ -23,6 +23,9 @@
   margin: 8em auto;
   position: relative;
   font-size: 11px;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
   -webkit-animation-delay: -0.16s;
   animation-delay: -0.16s;
 }
@@ -83,6 +86,9 @@
   width: 10em;
   height: 10em;
   box-shadow: inset 0 0 0 1em #FFF;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
 }
 .load2 .loader:after {
   width: 5.2em;
@@ -132,6 +138,9 @@
   position: relative;
   -webkit-animation: load3 1.4s infinite linear;
   animation: load3 1.4s infinite linear;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
 }
 .load3 .loader:before {
   width: 50%;
@@ -186,6 +195,9 @@
   text-indent: -9999em;
   -webkit-animation: load4 1.3s infinite linear;
   animation: load4 1.3s infinite linear;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
 }
 @-webkit-keyframes load4 {
   0%,
@@ -251,6 +263,9 @@
   text-indent: -9999em;
   -webkit-animation: load5 1.1s infinite ease;
   animation: load5 1.1s infinite ease;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
 }
 @-webkit-keyframes load5 {
   0%,
@@ -315,6 +330,9 @@
   border-radius: 50%;
   margin: 0.8em auto;
   position: relative;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
   -webkit-animation: load6 1.7s infinite ease;
   animation: load6 1.7s infinite ease;
 }
@@ -378,6 +396,9 @@
   font-size: 10px;
   position: relative;
   text-indent: -9999em;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
   -webkit-animation-delay: -0.16s;
   animation-delay: -0.16s;
 }
@@ -424,6 +445,9 @@
   border-right: 1.1em solid rgba(255, 255, 255, 0.2);
   border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
   border-left: 1.1em solid #ffffff;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
   -webkit-animation: load8 1.1s infinite linear;
   animation: load8 1.1s infinite linear;
 }
diff --git a/less/load1.less b/less/load1.less
@@ -21,6 +21,9 @@
   margin:8em auto;
   position:relative;
   font-size:11px;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
   -webkit-animation-delay:-0.16s;
   animation-delay:-0.16s;
 }
diff --git a/less/load2.less b/less/load2.less
@@ -28,6 +28,9 @@
   width:10em;
   height:10em;
   box-shadow: inset 0 0 0 1em #FFF;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
 }
 .load2 .loader:after {
   width:5.2em;
diff --git a/less/load3.less b/less/load3.less
@@ -16,6 +16,9 @@
   position: relative;
   -webkit-animation:load3 1.4s infinite linear;
   animation:load3 1.4s infinite linear;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
 
 }
 .load3 .loader:before {
diff --git a/less/load4.less b/less/load4.less
@@ -9,6 +9,9 @@
   text-indent:-9999em;
   -webkit-animation:load4 1.3s infinite linear;
   animation:load4 1.3s infinite linear;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
 }
 @-webkit-keyframes load4 {.load4-frames;}
 @keyframes load4 {.load4-frames;}
diff --git a/less/load5.less b/less/load5.less
@@ -9,6 +9,9 @@
   text-indent:-9999em;
   -webkit-animation:load5 1.1s infinite ease;
   animation:load5 1.1s infinite ease;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
 }
 @-webkit-keyframes load5 {.load5-frames;}
 @keyframes load5 {.load5-frames;}
diff --git a/less/load6.less b/less/load6.less
@@ -8,6 +8,9 @@
   border-radius:50%;
   margin:0.8em auto;
   position:relative;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
   -webkit-animation:load6 1.7s infinite ease;
   animation:load6 1.7s infinite ease;
 }
diff --git a/less/load7.less b/less/load7.less
@@ -13,6 +13,9 @@
   font-size:10px;
   position:relative;
   text-indent:-9999em;
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
   -webkit-animation-delay:-0.16s;
   animation-delay:-0.16s;
 }
diff --git a/less/load8.less b/less/load8.less
@@ -7,6 +7,9 @@
   border-right:1.1em solid rgba(255,255,255,0.2);
   border-bottom:1.1em solid rgba(255,255,255,0.2);
   border-left:1.1em solid rgba(255,255,255,1);
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
   -webkit-animation:load8 1.1s infinite linear;
   animation:load8 1.1s infinite linear;
 }
diff --git a/less/main.less b/less/main.less
@@ -131,13 +131,6 @@ h1 {
   right:0;
   .link;
 }
-.loader {
-  -webkit-transform: translateZ(0);
-  -moz-transform: translateZ(0);
-  -ms-transform: translateZ(0);
-  -o-transform: translateZ(0);
-  transform: translateZ(0);
-}
 .github img {
 	position: absolute;
 	top: 0; right: 0; border: 0;
