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.
For the HTML part we only need a parent container, it will contain the
textthat we want to show and the another empty
<div></div>which will be used as the
linewe want to animate.
Notice that the
textis not just a string but in a form of a list, so that we can change the
z-indexof individual characters.
Styling of the parent container
Just some general styling,
height, width, alignment also
relative, it will be used the position the
line with respect to parent.
Styling of Text
- align horizontally with flex
- Remove default styling of
z-indexset to 1
z-indexof alternative elements set to 3 ( using pseudo class
nth-child(2n + 1) or nth-child(2n))
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 say
5vwto final value '100vw'.
z-indexshould be set as 2, since the
lielements of the text is given value 1 and 3 alternatively.
- animation, to increase the
Link to Sandbox
Happy coding ♥ !