first commit

media/com_media/scss/components/_animations.scss

@@ -0,0 +1,73 @@
+// Animations
+
+// slide-fade
+.slide-fade-enter-active {
+  transition: all .3s cubic-bezier(.4, 0, .2, 1);
+}
+
+.slide-fade-leave-active {
+  transition: all .2s cubic-bezier(.4, 0, .2, 1);
+}
+
+.slide-fade-enter, .slide-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+// Infobar
+.infobar-enter-active {
+  animation: slideOutRight .2s reverse;
+}
+
+.infobar-leave-active {
+  animation: slideOutRight .2s;
+}
+
+html[dir=rtl] .infobar-enter-active {
+  animation: slideOutLeft .2s reverse;
+}
+
+html[dir=rtl] .infobar-leave-active {
+  animation: slideOutLeft .2s;
+}
+
+// Slide out right animation
+@keyframes slideOutRight {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    visibility: hidden;
+    transform: translate3d(-100%, 0, 0);
+  }
+}
+
+// Bounce in animation
+.fade-in-enter-active {
+  animation: fadeIn .2s;
+}
+
+.fade-in-leave-active {
+  animation: fadeIn .2s reverse;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}