andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update format

Browse Source
This commit is contained in:
Angelos Chalaris
2020-04-30 13:21:04 +03:00
parent d9fd2d23c3
commit 2fbd3e0737
55 changed files with 412 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
snippets/hover-underline-animation.md
View File

@ -5,6 +5,17 @@ tags: animation,advanced
Creates an animated underline effect when the text is hovered over.
- `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).
- `position: relative` on the element establishes a Cartesian positioning context for pseudo-elements.
- `:after` defines a pseudo-element.
- `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
- `width: 100%` ensures the pseudo-element spans the entire width of the text block.
- `transform: scaleX(0)` initially scales the pseudo element to 0 so it has no width and is not visible.
- `bottom: 0` and `left: 0` position it to the bottom left of the block.
- `transition: transform 0.25s ease-out` means changes to `transform` will be transitioned over 0.25 seconds with an `ease-out` timing function.
- `transform-origin: bottom right` means the transform anchor point is positioned at the bottom right of the block.
- `: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.
```html
<p class="hover-underline-animation">Hover this text to see the effect!</p>
```
@ -34,16 +45,3 @@ Creates an animated underline effect when the text is hovered over.
transform-origin: bottom left;
}
```
#### Explanation
- `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).
- `position: relative` on the element establishes a Cartesian positioning context for pseudo-elements.
- `:after` defines a pseudo-element.
- `position: absolute` takes the pseudo element out of the flow of the document and positions it in relation to the parent.
- `width: 100%` ensures the pseudo-element spans the entire width of the text block.
- `transform: scaleX(0)` initially scales the pseudo element to 0 so it has no width and is not visible.
- `bottom: 0` and `left: 0` position it to the bottom left of the block.
- `transition: transform 0.25s ease-out` means changes to `transform` will be transitioned over 0.25 seconds with an `ease-out` timing function.
- `transform-origin: bottom right` means the transform anchor point is positioned at the bottom right of the block.
- `: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.