CSS Animations - set duration on responsive animations - css

Question

I'm trying to learn CSS animations and one thing I can't figure out and couldnt find on the web is how to set the proper duration.
I'm trying to have my website responsive therefore the font size would change depending on the size of the view. I have the following code so far:
#media screen {
.EntranceDiv{
top: 40%;
position: relative;
}
h1 {
font-size: 4rem;
margin: 0px;
}
.helloworld{
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid #D9FAFF; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .8em;
display: inline-block;
animation:
typing initial steps(30, end),
blink-caret .5s step-end infinite;
}
#keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: #D9FAFF }
}
#keyframes typing {
from { width: 0 }
to { width: 65% }
}
}
My problem is that with the changes in the font size, the animation either goes for too long or for too short and then the whole thing just pops on the screen. What is a good way of setting duration for responsive animations

Answer 1

Your main issue here is that the width you set is relative to parent container so it has no relation with the content of your inline-block element. You need to find a way to correctly set the width of the element.
Since you cannot make a transition to width:auto, here is an idea where I duplicate the content and I use a pseudo-element with absolute position. The first content will define the width and will be hidden and the second one will be visible and I can stretch to fit the defined width using left/right properties:
h1 {
font-size: 4rem;
margin: 0px;
}
.helloworld {
letter-spacing: .8em;
display: inline-block;
position:relative;
visibility:hidden;
white-space: nowrap;
}
.helloworld:after {
content:attr(data-content);
display:block;
visibility:visible;
overflow: hidden;
white-space: nowrap;
position:absolute;
top:0;
left:0;
bottom:0;
right:100%;
border-right: .15em solid #D9FAFF;
animation: typing 2s steps(30, end) forwards, blink-caret .5s step-end infinite;
}
#keyframes blink-caret {
from,
to {
border-color: transparent
}
50% {
border-color: #D9FAFF
}
}
#keyframes typing {
from {
right:100%
}
to {
right: 0%
}
}
}
<h1 data-content="lorem" class="helloworld">
Lorem
</h1>
<h1 data-content="lor" class="helloworld">
Lor
</h1>
<h1 data-content="lorem ipsume" class="helloworld">
Lorem ipsume
</h1>