Unexpected dip on keyframe start - html

Question

I have a snippet which displays a text every 7 seconds. However at the beginning of each animation it performs an unexpected dip which i can't rule out. Can you find what it is?
Here's the pen.
.chillquote {
font-size: 1.5em;
line-height: 1.5em;
text-align: center;
padding: 1em;
color: var(--bodyColor);
height: 4em;
font-family: var(--usedH-font-stack);
}
div {
display: inline-block;
overflow: hidden;
}
div:first-of-type {
/* For increasing performance
ID/Class should've been used.
For a small demo
it's okaish for now */
animation: showup 7s infinite;
}
div:last-of-type {
width: 0px;
animation: reveal 7s infinite;
}
div:last-of-type span {
margin-left: -50rem;
animation: slidein 7s infinite;
}
#keyframes showup {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes slidein {
0% {
margin-left: -800px;
}
20% {
margin-left: -800px;
}
35% {
margin-left: 0px;
}
100% {
margin-left: 0px;
}
}
#keyframes reveal {
0% {
opacity: 0;
width: 0px;
}
20% {
opacity: 1;
width: 0px;
}
30% {
width: auto;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
width: auto;
}
}
<div class="chillquote">
<div>
Q
</div>
<div>
<span >
{{ randomQ.quote }}
<i><span style=" font-size: 0.5em;">~ {{ randomQ.author }}</span></i>
</span>
</div>
</div>

Answer 1

It's because you are using inline-block to display the all the divs.
When the text that appears starts out, you have a width of 0 set in the reveal animation - when it starts to appear you go from 0 to auto.
Since the quote text starts out as multi-line, the baseline changes so the Q "drops" down to the text baseline.
I've updated your pen to make the .chillquote display block and added classes to the other divs - because last-child and first-child were also effecting the .chillquote div because you never specified a child element.
I also set the final width to a percentage.
.chillquote {
font-size: 1.5em;
line-height: 1.5em;
text-align: left;
padding: 1em;
color: var(--bodyColor);
height: 4em;
font-family: var(--usedH-font-stack);
}
.chillquote div {
display: inline-block;
overflow: hidden;
}
div.first {
/* For increasing performance
ID/Class should've been used.
For a small demo
it's okaish for now */
animation: showup 7s infinite;
}
div.second {
width: 0px;
animation: reveal 7s infinite;
}
div.second span {
margin-left: -50rem;
animation: slidein 7s infinite;
}
#keyframes showup {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes slidein {
0% {
margin-left: -800px;
}
20% {
margin-left: -800px;
}
35% {
margin-left: 0px;
}
100% {
margin-left: 0px;
}
}
#keyframes reveal {
0% {
opacity: 0;
width: 0px;
}
20% {
opacity: 1;
width: 0px;
}
30% {
width: 80%;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
width: 80%;
}
}
<div class="chillquote">
<div class="first">
Q
</div>
<div class="second">
<span>Here is the quote<i> <span style="font-size: 0.5em;">~ Author</span></i>
</span>
</div>
</div>
https://codepen.io/chrislafrombois/pen/zYYpVQz
EDIT
For centered text, we can use display: flex and animate the flex-basis property to max-content.
.chillquote {
font-size: 1.5em;
line-height: 1.5em;
padding: 1em;
color: var(--bodyColor);
height: 4em;
font-family: var(--usedH-font-stack);
display: flex;
justify-content: center;
}
div.first {
animation: showup 7s infinite;
text-align: right;
}
div.second {
width: 0px;
animation: reveal 7s infinite;
text-align: left;
overflow: hidden;
}
div.second span.quote {
animation: slidein 7s infinite;
}
#keyframes showup {
0% {
opacity: 0;
}
20% {
opacity: 1;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes slidein {
0% {
margin-left: -100vw;
}
20% {
margin-left: -100vw;
}
35% {
margin-left: 0;
}
100% {
margin-left: 0;
}
}
#keyframes reveal {
0% {
opacity: 0;
flex-basis: 0;
}
20% {
opacity: 1;
flex-basis: 0;
}
30% {
flex-basis: max-content;
}
80% {
opacity: 1;
}
100% {
opacity: 0;
flex-basis: max-content;
}
}
<div class="chillquote">
<div class="first">
Q
</div>
<div class="second">
<span class="quote">Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.<i> <span style="font-size: 0.5em;">~ {{ randomQ.author }}</span></i>
</span>
</div>
</div>
New CodePen: https://codepen.io/chrislafrombois/pen/zYYRzOY