Change the width of black block - html

Question

.box {
width: 300px;
height: 30px;
display: flex;
justify-content: center;
flex-direction: column;
}
.block1 {
width: 10%;
height: inherit;
background: black;
position: absolute;
animation: boxincrease 2s cubic-bezier(0.74, 0.86, 0.4, 0.92) forwards;
}
#keyframes boxincrease {
0% {
width: 10%;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0%;
left: 100%;
}
}
<div class="nameintro">
<div class="box">
<div class="block1"></div>
<h1>XYZ<span>.</span></h1>
</div>
<div class="role">
<div class="block2"></div>
<p>AMATEUR ARTIST</p>
</div>
</div>
I want to change the width of the black block as it is covering the whole width of the page i want it to cover only the part where xyz written.
I want to make something like this without using scss.
https://www.youtube.com/watch?v=7d2XsPSjjjI

Answer 1

You need to set the "box" width to fit content so that it doesn't exceed the text and set the position relative to it.
.box {
width: fit-content;
height: 30px;
display: flex;
justify-content: center;
flex-direction: column;
position: relative;
}
.block1 {
height: inherit;
background: black;
position: absolute;
animation: boxincrease 2s cubic-bezier(0.74, 0.86, 0.4, 0.92) forwards;
}
#keyframes boxincrease {
0% {
width: 10%;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0%;
left: 100%;
}
}
<div class="nameintro">
<div class="box">
<div class="block1"></div>
<h1>XYZ<span>.</span></h1>
</div>
<div class="role">
<div class="block2"></div>
<p>AMATEUR ARTIST</p>
</div>
</div>

Answer 2

Adjust the values in your keyframe,
.box {
width: 300px;
height: 30px;
display: flex;
justify-content: center;
flex-direction: column;
}
.block1 {
width: 10%;
height: inherit;
background: black;
position: absolute;
animation: boxincrease 0.8s cubic-bezier(0.74, 0.86, 0.4, 0.92) forwards;
}
#keyframes boxincrease {
0% {
width: 10%;
left: 0;
}
50% {
width: 15%;
left: 0;
}
100% {
width: 0%;
left: 15%;
}
}
<div class="nameintro">
<div class="box">
<div class="block1"></div>
<h1>XYZ<span>.</span></h1>
</div>
<div class="role">
<div class="block2"></div>
<p>AMATEUR ARTIST</p>
</div>
</div>

Answer 3

I would use a grid and put the blocks in the same grid column example;
.nameintro {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: minmax(30px, auto);
}
.box {
display: grid;
justify-content: center;
grid-template-columns: 300px;
grid-auto-rows: minmax(30px, auto);
}
.one {
grid-column: 1 / 1;
grid-row: 1;
}
.two {
grid-column: 1 / 1;
grid-row: 1;
align-self: center;
justify-self: center;
}
.role {
grid-column: 2 / 2
}
.block1 {
background-color: black;
animation: boxincrease 2s cubic-bezier(0.74, 0.86, 0.4, 0.92) forwards;
}
#keyframes boxincrease {
0% {
width: 10%;
left: 0;
}
50% {
width: 100%;
left: 0;
}
100% {
width: 0%;
left: 100%;
}
}
<div class="nameintro">
<div class="box">
<div class="one block1"></div>
<h1 class="two">XYZ<span>.</span></h1>
</div>
<div class="role">
<div class="block2"></div>
<p>AMATEUR ARTIST</p>
</div>
</div>