implemented styles

src/styles/thorn/utilities/animations.scss

@@ -0,0 +1,171 @@
+.anim-fade-in {
+    animation-name: fade-in;
+    animation-duration: 1s;
+    animation-timing-function: ease-in-out;
+
+    &.fast {
+        animation-duration: 300ms;
+    }
+}
+
+@keyframes fade-in {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+.anim-fade-out {
+    animation-name: fade-out;
+    animation-duration: 1s;
+    animation-timing-function: ease-out;
+
+    &.fast {
+        animation-duration: 0.3s;
+    }
+}
+
+@keyframes fade-out {
+    0% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
+.anim-fade-up {
+    opacity: 0;
+    animation-name: fade-up;
+    animation-duration: 0.3s;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-out;
+    animation-delay: 1s;
+}
+
+@keyframes fade-up {
+    0% {
+        opacity: 0.8;
+        transform: translateY(100%);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.anim-fade-down {
+    animation-name: fade-down;
+    animation-duration: 0.3s;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-in;
+}
+
+@keyframes fade-down {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    100% {
+        opacity: 0.5;
+        transform: translateY(100%);
+    }
+}
+
+.anim-grow-x {
+    width: 0%;
+    animation-name: grow-x;
+    animation-duration: 0.3s;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease;
+    animation-delay: 0.5s;
+}
+
+@keyframes grow-x {
+    to { width: 100%; }
+}
+
+.anim-shrink-x {
+    animation-name: shrink-x;
+    animation-duration: 0.3s;
+    animation-fill-mode: forwards;
+    animation-timing-function: ease-in-out;
+    animation-delay: 0.5s;
+}
+
+@keyframes shrink-x {
+    to { width: 0%; }
+}
+
+.anim-scale-in {
+    animation-name: scale-in;
+    animation-duration: 0.15s;
+    animation-timing-function: cubic-bezier(0.2, 0, 0.13, 1.5);
+}
+
+@keyframes scale-in {
+    0% {
+        opacity: 0;
+        transform: scale(0.5);
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+.anim-pulse {
+    animation-name: pulse;
+    animation-duration: 2s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+}
+
+@keyframes pulse {
+    0% {
+        opacity: 0.3;
+    }
+
+    10% {
+        opacity: 1;
+    }
+
+    100% {
+        opacity: 0.3;
+    }
+}
+
+    .anim-pulse-in {
+    animation-name: pulse-in;
+    animation-duration: 0.5s;
+}
+
+@keyframes pulse-in {
+    0% {
+        transform: scale3d(1, 1, 1);
+    }
+
+    50% {
+        transform: scale3d(1.1, 1.1, 1.1);
+    }
+
+    100% {
+        transform: scale3d(1, 1, 1);
+    }
+}
+
+.hover-grow {
+    transition: transform 0.3s;
+    backface-visibility: hidden;
+
+    &:hover {
+        transform: scale(1.025);
+    }
+}