Hello folks!
I often love to play around with CSS and try out things whenever I'm free. I always feel animations with just CSS is highly underrated and can be used to achieve 60 fps animations without any JS involved.
I have tried to create a very simple animation, a strike through line, a line passes through a text and the characters in that text are alternatively overlapped onto the line.
HTML
For the HTML part we only need a parent container, it will contain the
text that we want to show and the another empty <div></div> which will be used as the line we want to animate. Notice that the
text is not just a string but in a form of a list, so that we can change the z-index of individual characters.
CSS
Styling of the parent container
Just some general styling, height, width, alignment also position as relative, it will be used the position the line with respect to parent.
Styling of Text
- align horizontally with flex
- Remove default styling of
li -
z-indexset to 1 -
z-indexof alternative elements set to 3 ( using pseudo classnth-child(2n + 1) or nth-child(2n)) -
position:relative-z-indexwon't work without it.
Styling of line
- position it
absolutewith respect to the parent element, half way from the top. -
widthto be some default value, we will animate width of the line from some initial value lets say5vwto final value '100vw'. -
z-indexshould be set as 2, since thelielements of the text is given value 1 and 3 alternatively. - animation, to increase the
widthofline.
Link to Sandbox
https://codesandbox.io/s/strike-through-line-animation-q7x9m
Happy coding ♥ !
Top comments (3)
Screenreaders will read "List item H, list item E, list item L, list item L list item O".
I'd recommend not using ul here and make use of a
aria-label="hello"on the parent element ✌️Nice. I would replace
:nth-child(2n + 1)with:nth-child(even).Yeah, or it can be
:nth-child(even),:nth-child(odd),:nth-child(2n)