Namespace keyframe animations with theme names

Author: adamschwartz

templates/pace-theme-barber-shop.tmpl.css

@@ -37,30 +37,30 @@
   -o-background-size: 32px 32px;
   background-size: 32px 32px;
 
-  -webkit-animation: pace-stripe-animation 500ms linear infinite;
-  -moz-animation: pace-stripe-animation 500ms linear infinite;
-  -ms-animation: pace-stripe-animation 500ms linear infinite;
-  -o-animation: pace-stripe-animation 500ms linear infinite;
-  animation: pace-stripe-animation 500ms linear infinite;
+  -webkit-animation: pace-theme-barber-shop-motion 500ms linear infinite;
+  -moz-animation: pace-theme-barber-shop-motion 500ms linear infinite;
+  -ms-animation: pace-theme-barber-shop-motion 500ms linear infinite;
+  -o-animation: pace-theme-barber-shop-motion 500ms linear infinite;
+  animation: pace-theme-barber-shop-motion 500ms linear infinite;
 }
 
-@-webkit-keyframes pace-stripe-animation {
+@-webkit-keyframes pace-theme-barber-shop-motion {
   0% { -webkit-transform: none; transform: none; }
   100% { -webkit-transform: translate(-32px, 0); transform: translate(-32px, 0); }
 }
-@-moz-keyframes pace-stripe-animation {
+@-moz-keyframes pace-theme-barber-shop-motion {
   0% { -moz-transform: none; transform: none; }
   100% { -moz-transform: translate(-32px, 0); transform: translate(-32px, 0); }
 }
-@-o-keyframes pace-stripe-animation {
+@-o-keyframes pace-theme-barber-shop-motion {
   0% { -o-transform: none; transform: none; }
   100% { -o-transform: translate(-32px, 0); transform: translate(-32px, 0); }
 }
-@-ms-keyframes pace-stripe-animation {
+@-ms-keyframes pace-theme-barber-shop-motion {
   0% { -ms-transform: none; transform: none; }
   100% { -ms-transform: translate(-32px, 0); transform: translate(-32px, 0); }
 }
-@keyframes pace-stripe-animation {
+@keyframes pace-theme-barber-shop-motion {
   0% { transform: none; transform: none; }
   100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
 }

templates/pace-theme-corner-indicator.tmpl.css

@@ -44,8 +44,8 @@
     height: 80px;
     border-right-color: rgba(0, 0, 0, .2);
     border-left-color: rgba(0, 0, 0, .2);
-    -webkit-animation: pace-rotation 3s linear infinite;
-    animation: pace-rotation 3s linear infinite;
+    -webkit-animation: pace-theme-corner-indicator-spin 3s linear infinite;
+    animation: pace-theme-corner-indicator-spin 3s linear infinite;
 }
 
 .pace .pace-activity::after {
@@ -55,15 +55,15 @@
     height: 40px;
     border-top-color: rgba(0, 0, 0, .2);
     border-bottom-color: rgba(0, 0, 0, .2);
-    -webkit-animation: pace-rotation 1s linear infinite;
-    animation: pace-rotation 1s linear infinite;
+    -webkit-animation: pace-theme-corner-indicator-spin 1s linear infinite;
+    animation: pace-theme-corner-indicator-spin 1s linear infinite;
 }
 
-@-webkit-keyframes pace-rotation {
+@-webkit-keyframes pace-theme-corner-indicator-spin {
   0% { -webkit-transform: rotate(0deg); }
   100% { -webkit-transform: rotate(359deg); }
 }
-@keyframes pace-rotation {
+@keyframes pace-theme-corner-indicator-spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(359deg); }
 }

templates/pace-theme-mac-osx.tmpl.css

@@ -66,30 +66,30 @@
   -o-background-size: 28px 100%;
   background-size: 28px 100%;
 
-  -webkit-animation: pace-stripe-animation 500ms linear infinite;
-  -moz-animation: pace-stripe-animation 500ms linear infinite;
-  -ms-animation: pace-stripe-animation 500ms linear infinite;
-  -o-animation: pace-stripe-animation 500ms linear infinite;
-  animation: pace-stripe-animation 500ms linear infinite;
+  -webkit-animation: pace-theme-mac-osx-motion 500ms linear infinite;
+  -moz-animation: pace-theme-mac-osx-motion 500ms linear infinite;
+  -ms-animation: pace-theme-mac-osx-motion 500ms linear infinite;
+  -o-animation: pace-theme-mac-osx-motion 500ms linear infinite;
+  animation: pace-theme-mac-osx-motion 500ms linear infinite;
 }
 
-@-webkit-keyframes pace-stripe-animation {
+@-webkit-keyframes pace-theme-mac-osx-motion {
   0% { -webkit-transform: none; transform: none; }
   100% { -webkit-transform: translate(-28px, 0); transform: translate(-28px, 0); }
 }
-@-moz-keyframes pace-stripe-animation {
+@-moz-keyframes pace-theme-mac-osx-motion {
   0% { -moz-transform: none; transform: none; }
   100% { -moz-transform: translate(-28px, 0); transform: translate(-28px, 0); }
 }
-@-o-keyframes pace-stripe-animation {
+@-o-keyframes pace-theme-mac-osx-motion {
   0% { -o-transform: none; transform: none; }
   100% { -o-transform: translate(-28px, 0); transform: translate(-28px, 0); }
 }
-@-ms-keyframes pace-stripe-animation {
+@-ms-keyframes pace-theme-mac-osx-motion {
   0% { -ms-transform: none; transform: none; }
   100% { -ms-transform: translate(-28px, 0); transform: translate(-28px, 0); }
 }
-@keyframes pace-stripe-animation {
+@keyframes pace-theme-mac-osx-motion {
   0% { transform: none; transform: none; }
   100% { transform: translate(-28px, 0); transform: translate(-28px, 0); }
 }