Add a link with a translate transirion

2020-02-27 23:05:42 +01:00
parent c9fd287609
commit e212829db5
3 changed files with 66 additions and 4 deletions
--- a/src/style/atoms/_link.scss
+++ b/src/style/atoms/_link.scss
@@ -63,3 +63,48 @@
        }
    }
 }
+
+
+// Link with animated letters
+.link-translate {
+    .text {
+        position: relative;
+        overflow: hidden;
+
+        &:after {
+            content: attr(data-text);
+            position: absolute;
+            top: 50%;
+            left: 0;
+            width: 100%;
+            text-align: center;
+            transform: translateY(-50%);
+            opacity: 1;
+            transition: all 275ms $ease-cubic;
+            will-change: transform, opacity;
+        }
+
+        span {
+            display: inline-block;
+            transform: translateY(-75%);
+            opacity: 0;
+            transition: all 275ms $ease-cubic;
+            will-change: transform, opacity;
+        }
+    }
+
+    // Hover
+    &:hover {
+        .text {
+            &:after {
+                transform: translateY(25%);
+                opacity: 0;
+            }
+
+            span {
+                transform: translateY(0);
+                opacity: 1;
+            }
+        }
+    }
+}