added some few animation classes

Author: bemijonathan

demo/report.20200526.101148.3406.0.001.json

@@ -15,4 +15,28 @@ export default [
     name: 'Shrink',
     class: 'shrink',
   },
+  {
+    name: 'Scale in',
+    class: 'scale-in'
+  },
+  {
+    name: 'Rotate',
+    class: 'rotate'
+  },
+  {
+    name:'Swirl',
+    class:'swirl'
+  },
+  {
+    name:'Roll In Left',
+    class:'roll-in-left'
+  },
+  {
+    name: 'Tilt In',
+    class: 'tilt-in'
+  },
+  {
+    name: 'Flip in',
+    class: 'flip-in'
+  }
 ];

demo/src/assets/animations.js

@@ -0,0 +1,11 @@
+  .flip-in-enter,
+  .flip-in-leave-to{
+    transform: rotateY(-80deg);
+    opacity: 0;
+  }
+  
+  .flip-in-enter-active,
+  .flip-in-leave-active{
+      transition:  transform 0.5s, opacity 1s ;
+  }  
+  

dist/index.min.css

@@ -0,0 +1,12 @@
+/* roll in animation */
+.roll-in-left-enter,
+.roll-in-left-leave-to{
+    transform: translateX(-800px) rotate(-540deg);
+    opacity: 0;
+}
+
+.roll-in-left-enter-active,
+.roll-in-left-leave-active{
+    transition:  transform 0.3s, opacity 0.5s ;
+}
+  

src/flip-in.css

@@ -0,0 +1,12 @@
+
+/* scalle in animation */
+.rotate-enter,
+.rotate-leave-to{
+    transform: rotate(-360deg);
+    opacity: 0;
+}
+
+.rotate-enter-active,
+.rotate-leave-active{
+    transition:  transform 0.3s, opacity 0.5s ;
+}

src/roll-in-left.css

@@ -0,0 +1,12 @@
+
+/* scalle in animation */
+.scale-in-enter,
+.scale-in-leave-to{
+   transform: scale(0);
+   opacity: 0;
+}
+
+.scale-in-enter-active,
+.scale-in-leave-active{
+    transition:  transform 0.3s, opacity 0.5s ;
+}

src/rotate.css

@@ -0,0 +1,11 @@
+
+  .swirl-enter,
+  .swirl-leave-to{
+    transform: rotate(-540deg) scale(0);
+    opacity: 0;
+  }
+  
+  .swirl-enter-active,
+  .swirl-leave-active{
+      transition:  transform 0.5s, opacity 1s ;
+  }  

src/scale-in.css

@@ -0,0 +1,12 @@
+
+/* tilt in animation */
+.tilt-in-enter,
+.tilt-in-leave-to{
+    transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
+    opacity: 0;
+}
+
+.tilt-in-enter-active,
+.tilt-in-leave-active{
+    transition:  transform 0.3s, opacity 0.5s ;
+}