How to stop the animation at the end of the h4.
As you can see in the picure my animation keeps running till over h4. How do i stop this at the end of h4.
https://codepen.io/Boeroe/pen/mdaNNwX
9 Replies
Right now the
h4 is taking up the entire div.homepage, so if you constrain the h4, the animation will only run the length of the text.
How do i constrain h4
My experimenting lead me to this restucture of the html:
And I gave the
.textani selector a width of min-content.That gives you this:
Not working for me
Your codepen isn't quite what I described.
This is the change I made to the
h4 tag:
This changes the structure to group each individual line within the h4, so that when we make the CSS changes, they will continue to be lines.
And it is supported by adding a width property to the .homepave h4.textani selector:
This change constrains the h4 to only be exactly as wide as it needs to be to hold its contents.
Finally, we add this CSS rule:
This change makes it so each row is at least wide enough to keep all the text on one line.
Hope this helps!Thanks a lot. its not really syncin then: https://codepen.io/Boeroe/pen/mdaNNwX
Ooof, yeah. I don't have a good answer for that without resorting to JS.
I fixed that
@keyframes homeBgText {
0%, 10%, 100% {
background-position: -24rem 0;
Changed it to -24 instead of -33
Only problem i run into if i change my VS code to the one from codepen its getting messy