Studio: updates keyframes/animations syntax for all animations

cms/static/sass/assets/_anims.scss

@@ -2,35 +2,51 @@
 // ====================
 
 // rotate clockwise
-@mixin rotateClockwise {
+@include keyframes(rotateCW) {
   0% {
     @include transform(rotate(0deg));
   }
 
+  50% {
+    @include transform(rotate(180deg));
+  }
+
   100% {
     @include transform(rotate(360deg));
   }
 }
 
-@-moz-keyframes rotateClockwise { @include rotateClockwise(); }
-@-webkit-keyframes rotateClockwise { @include rotateClockwise(); }
-@-o-keyframes rotateClockwise { @include rotateClockwise(); }
-@keyframes rotateClockwise { @include rotateClockwise();}
+// ====================
+
+// canned rotate clockwise animation - use if you want out of the box/non-customized anim
+.anim-rotateCW {
+  @include animation(rotateCW 1.0s linear inifinte);
+}
 
-@mixin anim-rotateClockwise($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
-  @include animation-name(rotateClockwise);
-  @include animation-duration($duration);
-  @include animation-delay($delay);
-  @include animation-timing-function($timing);
-  @include animation-iteration-count($count);
-  @include animation-fill-mode(both);
+// rotate counter-clockwise
+@include keyframes(rotateCCW) {
+  0% {
+    @include transform(rotate(0deg));
+  }
 
+  50% {
+    @include transform(rotate(-180deg));
+  }
+
+  100% {
+    @include transform(rotate(-360deg));
+  }
+}
+
+// canned rotate counter-clockwise animation - use if you want out of the box/non-customized anim
+.anim-rotateCCW {
+  @include animation(rotateCCW 1.0s linear inifinte);
 }
 
 // ====================
 
 // notifications slide up
-@mixin notificationsSlideUp {
+@include keyframes(notificationSlideUp) {
   0% {
     @include transform(translateY(0));
   }
@@ -44,25 +60,10 @@
   }
 }
 
-@-moz-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
-@-webkit-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
-@-o-keyframes notificationsSlideUp { @include notificationsSlideUp(); }
-@keyframes notificationsSlideUp { @include notificationsSlideUp();}
-
-@mixin anim-notificationsSlideUp($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
-  @include animation-name(notificationsSlideUp);
-  @include animation-duration($duration);
-  @include animation-delay($delay);
-  @include animation-timing-function($timing);
-  @include animation-iteration-count($count);
-  @include animation-fill-mode(both);
-
-}
-
 // ====================
 
 // notifications slide down
-@mixin notificationsSlideDown {
+@include keyframes(notificationSlideDown) {
   0% {
     @include transform(translateY(-($notification-height*0.99)));
   }
@@ -76,24 +77,10 @@
   }
 }
 
-@-moz-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
-@-webkit-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
-@-o-keyframes notificationsSlideDown { @include notificationsSlideDown(); }
-@keyframes notificationsSlideDown { @include notificationsSlideDown();}
-
-@mixin anim-notificationsSlideDown($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
-  @include animation-name(notificationsSlideDown);
-  @include animation-duration($duration);
-  @include animation-delay($delay);
-  @include animation-timing-function($timing);
-  @include animation-iteration-count($count);
-  @include animation-fill-mode(both);
-}
-
 // ====================
 
 // bounce in
-@mixin bounceIn {
+@include keyframes(bounceIn) {
   0% {
     opacity: 0.0;
     @include transform(scale(0.3));
@@ -109,38 +96,15 @@
   }
 }
 
-@-moz-keyframes bounceIn { @include bounceIn(); }
-@-webkit-keyframes bounceIn { @include bounceIn(); }
-@-o-keyframes bounceIn { @include bounceIn(); }
-@keyframes bounceIn { @include bounceIn();}
-
-@mixin anim-bounceIn($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
-  @include animation-name(bounceIn);
-  @include animation-duration($duration);
-  @include animation-delay($delay);
-  @include animation-timing-function($timing);
-  @include animation-iteration-count($count);
-  @include animation-fill-mode(both);
+// canned bounce in animation - use if you want out of the box/non-customized anim
+.anim-bounceIn {
+  @include animation(bounceIn 0.5s ease-in-out 1);
 }
 
 // ====================
 
-// bounce in
-@mixin bounceOut {
-  0% {
-    opacity: 0.0;
-    @include transform(scale(0.3));
-  }
-
-  50% {
-    opacity: 1.0;
-    @include transform(scale(1.05));
-  }
-
-  100% {
-    @include transform(scale(1));
-  }
-
+// bounce out
+@include keyframes(bounceOut) {
   0% {
     @include transform(scale(1));
   }
@@ -156,16 +120,7 @@
   }
 }
 
-@-moz-keyframes bounceOut { @include bounceOut(); }
-@-webkit-keyframes bounceOut { @include bounceOut(); }
-@-o-keyframes bounceOut { @include bounceOut(); }
-@keyframes bounceOut { @include bounceOut();}
-
-@mixin anim-bounceOut($duration, $timing: ease-in-out, $count: 1, $delay: 0) {
-  @include animation-name(bounceOut);
-  @include animation-duration($duration);
-  @include animation-delay($delay);
-  @include animation-timing-function($timing);
-  @include animation-iteration-count($count);
-  @include animation-fill-mode(both);
+// canned bounce in animation - use if you want out of the box/non-customized anim
+.anim-bounceOut {
+  @include animation(bounceOut 0.5s ease-in-out 1);
 }