From d0034c985d803dd4adde5fd2b873b5ed73620995 Mon Sep 17 00:00:00 2001 From: atomiks Date: Wed, 28 Feb 2018 21:19:22 +1000 Subject: [PATCH 1/5] add: hover underline animation --- snippets/hover-underline-animation.md | 89 +++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 snippets/hover-underline-animation.md diff --git a/snippets/hover-underline-animation.md b/snippets/hover-underline-animation.md new file mode 100644 index 000000000..5fd2a1e12 --- /dev/null +++ b/snippets/hover-underline-animation.md @@ -0,0 +1,89 @@ +### Hover underline animation + +Creates an animated underline effect when the text is hovered over. + +#### HTML + +```html +

+``` + +#### CSS + +```css +.hover-underline-animation { + display: inline-block; + position: relative; + color: deeppink; +} +.hover-underline-animation::after { + content: ''; + position: absolute; + width: 100%; + transform: scaleX(0); + height: 2px; + bottom: 0; + left: 0; + background-color: deeppink; + transform-origin: bottom right; + transition: transform 0.2s ease-out; +} +.hover-underline-animation:hover::after { + transform: scaleX(1); + transform-origin: bottom left; +} +``` + +#### Demo + +
+

Hover this text to see the effect!

+
+ + + +#### Explanation + +1. `display: inline-block` makes the block `p` an `inline-block` to prevent the underline from +spanning the entire parent width rather than just the content (text). +2. `position: relative` on the element establishes a Cartesian positioning context for psuedo-elements. +3. `::after` defines a pseudo-element. +4. `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent. +5. `width: 100%` ensures the pseudo-element spans the entire width of the text block. +6. `transform: scaleX(0)` initially scales the pseudo element to 0 so it has no width and is not visible. +7. `bottom: 0` and `left: 0` position it to the bottom left of the block. +8. `transition: transform 0.25s ease-out` means changes to `transform` will be transitioned over 0.25 seconds +with an `ease-out` timing function. +9. `transform-origin: bottom right` means the transform anchor point is positioned at the bottom right of the block. +10. `:hover::after` then uses `scaleX(1)` to transition the width to 100%, then changes the `transform-origin` +to `bottom left` so that the anchor point is reversed, allowing it transition out in the other direction when +hovered off. + +#### Browser support + +✅ No caveats. + +* https://caniuse.com/#feat=transforms2d +* https://caniuse.com/#feat=css-transitions From 45b8b774dacb33690306caf6b127cd88f30bb904 Mon Sep 17 00:00:00 2001 From: atomiks Date: Wed, 28 Feb 2018 21:22:17 +1000 Subject: [PATCH 2/5] Add missing text --- snippets/hover-underline-animation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/hover-underline-animation.md b/snippets/hover-underline-animation.md index 5fd2a1e12..5b1f6fda6 100644 --- a/snippets/hover-underline-animation.md +++ b/snippets/hover-underline-animation.md @@ -5,7 +5,7 @@ Creates an animated underline effect when the text is hovered over. #### HTML ```html -

+

Hover this text to see the effect!

``` #### CSS From f6ac36422038619f7718f6dd55a2dc8c6a042c20 Mon Sep 17 00:00:00 2001 From: atomiks Date: Wed, 28 Feb 2018 21:22:45 +1000 Subject: [PATCH 3/5] Match colors with demo --- snippets/hover-underline-animation.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/snippets/hover-underline-animation.md b/snippets/hover-underline-animation.md index 5b1f6fda6..7405c1194 100644 --- a/snippets/hover-underline-animation.md +++ b/snippets/hover-underline-animation.md @@ -14,7 +14,7 @@ Creates an animated underline effect when the text is hovered over. .hover-underline-animation { display: inline-block; position: relative; - color: deeppink; + color: #0087ca; } .hover-underline-animation::after { content: ''; @@ -24,7 +24,7 @@ Creates an animated underline effect when the text is hovered over. height: 2px; bottom: 0; left: 0; - background-color: deeppink; + background-color: #0087ca; transform-origin: bottom right; transition: transform 0.2s ease-out; } From 8c0b99f175b74119a328ff9d9b12b0f6a38ad8b5 Mon Sep 17 00:00:00 2001 From: atomiks Date: Wed, 28 Feb 2018 21:34:26 +1000 Subject: [PATCH 4/5] 0.25s transition --- snippets/hover-underline-animation.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/hover-underline-animation.md b/snippets/hover-underline-animation.md index 7405c1194..8c86076b4 100644 --- a/snippets/hover-underline-animation.md +++ b/snippets/hover-underline-animation.md @@ -26,7 +26,7 @@ Creates an animated underline effect when the text is hovered over. left: 0; background-color: #0087ca; transform-origin: bottom right; - transition: transform 0.2s ease-out; + transition: transform 0.25s ease-out; } .hover-underline-animation:hover::after { transform: scaleX(1); From 048064bc8ad1c7a060f292d63445673f52f76b52 Mon Sep 17 00:00:00 2001 From: atomiks Date: Thu, 1 Mar 2018 08:47:14 +1100 Subject: [PATCH 5/5] Add credit --- snippets/hover-underline-animation.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/snippets/hover-underline-animation.md b/snippets/hover-underline-animation.md index 8c86076b4..e142ffab6 100644 --- a/snippets/hover-underline-animation.md +++ b/snippets/hover-underline-animation.md @@ -2,6 +2,8 @@ Creates an animated underline effect when the text is hovered over. +**Credit:** https://flatuicolors.com/ + #### HTML ```html