Unexpected effect of padding on width animation

This question is similar to this question resolved previously:
CSS text-align delay with width animation

I have an animation that goes from 0% width to 100% with the intent of loading the page without any text visible and immediately revealing it from left to right.

I noticed that with the padding included, the first portion of the text on the left loads already visible. What is the reason for this? Thanks!

@keyframes leftright
0%
max-width: 0%;

100%
max-width: 100%;



.test_1
overflow: hidden;
white-space: nowrap;
width: 80vw;
padding: 0 10vw;
border: 1px solid red;
font: bold 15vmin 'Playfair Display', serif;
animation: leftright 1s;


<div class="test_1">Why hello there</div>


2 Answers
2

You can achieve the desired behavior without the unwanted side effects by splitting up the presentation and animation jobs and assigning them to separate divs.

Here is another question that has an answer to explain why the padded div doesn't have a width of zero. border-box with padding can't have 0 width

@keyframes leftright
0%
max-width: 0%;

100%
max-width: 100%;



.test_1
animation: leftright 10s;
overflow: hidden;
white-space: nowrap;
width: 80vw;
border: 1px solid red;


.test_2
padding: 0 10vw;
font: bold 15vmin 'Playfair Display', serif;


<div class="test_1">
<div class="test_2">Why hello there</div>
</div>

That's because the CSS width property (and also max-width and min-width properties) refer to the content width. The content is what's inside the margin, border and padding in the box model.

width

max-width

min-width

If you look at the starting property of your div.test_1, they are:

div.test_1

.test_1
overflow: hidden;
white-space: nowrap;
padding: 0 10vw;
max-width: 0;
border: 1px solid red;
font: bold 15vmin 'Playfair Display', serif;


<div class="test_1">Why hello there</div>

The visual width of the element is actually due to the width plus the left and right padding values of 10vw, plus the left and right border widths.

10vw

To work around it, you could do what JasonB suggested.

Alternatively, you could include the padding in your keyframes, which has the side-effect of animating the (left and right) padding also.

keyframes

@keyframes leftright
0%
padding: 0;
max-width: 0;

100%
padding: 0 10vw;
max-width: 100%;



.test_1
overflow: hidden;
white-space: nowrap;
/* width: 80vw; <-- I removed this as it appears to contradict with max-width */
border: 1px solid red;
font: bold 15vmin 'Playfair Display', serif;
max-width: 100%;
padding: 0 10vw;
animation: leftright 1s;


<div class="test_1">Why hello there</div>

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.