How to stop animation elements moving on top of other element - html

Question

I have implemented animation on a list. List should move horizontally on the screen. There is a div element for information i.e. waiting token.
List should not cross that div.
here goes my code:
.list_wrapper__content {
position: absolute;
top: 25%;
left: 0;
height: 5vh;
background-color: #fff;
animation: animate_opp_2 25s linear infinite;
display: flex;
margin-left: 10%;
}
.list_wrapper__content___item {
height: 5vh;
border: 1px solid red;
width: 200px;
margin-right: 1%;
text-align: center;
border-radius: 8px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
color: grey;
font-size: 30px;
font-weight: bold;
display: flex;
justify-content: center;
}
#keyframes animate_opp_2 {
0% {
left: 10;
transform: translate(20%);
}
100% {
left: 0;
transform: translate(-100%);
}
}
.header {
height: 140px;
width: 200px;
border: 1px solid black;
z-index: 3;
position: relative;
}
<div class="list_wrapper">
<div class="header"> Waiting Tokens</div>
<div class="list_wrapper__content">
<div class="list_wrapper__content___item" *ngFor="let item of ListItems">
{{item}}
</div>
</div>
</div>
Stackblitz for the same:
https://stackblitz.com/edit/angular-ivy-pvmjdz?file=src/app/app.component.css
Looks like I am missing something. Any help will be highly appreciated

Answer 1

Replace all list_wrapper__content___item with
<div class="list_wrapper__content___item" *ngFor="let item of ListItems">
{{item}}
</div>
.list_wrapper {
height: 60px;
display: flex;
background-color: grey;
overflow:hidden;
}
.header {
text-transform: uppercase;
min-width: 100px;
font-weight: bold;
border-right: 1px solid black;
display: flex;
align-items: center;
text-align: center;
background-color: white;
z-index:1
}
.list_wrapper__content {
animation: animate_opp_2 25s linear infinite;
display: flex;
align-items: center;
}
.list_wrapper__content___item {
height: 30px;
border: 1px solid red;
width: 200px;
margin-right: 1%;
border-radius: 2px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
color: grey;
font-size: 30px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
#keyframes animate_opp_2 {
0% {
left: 10;
transform: translate(20%);
}
100% {
left: 0;
transform: translate(-100%);
}
}
<div class="list_wrapper">
<div class="header"> Waiting Tokens</div>
<div class="list_wrapper__content">
<div class="list_wrapper__content___item">
1000
</div>
<div class="list_wrapper__content___item">
1001
</div>
<div class="list_wrapper__content___item">
1002
</div>
<div class="list_wrapper__content___item">
1003
</div>
<div class="list_wrapper__content___item">
1004
</div>
<div class="list_wrapper__content___item">
1005
</div>
<div class="list_wrapper__content___item">
1006
</div>
</div>
</div

Answer 2

you put an animation on your wrapper div, if you want to stop the animation right before
<div class="header"> Waiting Tokens</div>
you should put your animation on .list_wrapper__content___item
i slightly modified your css
.list_wrapper {
padding: 2rem;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
}
.list_wrapper__content {
/* position: absolute; */
left: 0;
height: 250px;
background-color: #fff;
display: flex;
/* margin-left: 10%; */
position: relative;
overflow: hidden;
}
.list_wrapper__content___item {
height: 5vh;
border: 1px solid red;
width: 200px;
margin-right: 1%;
text-align: center;
border-radius: 8px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
color: grey;
font-size: 30px;
font-weight: bold;
display: inline-flex;
justify-content: center;
animation: animate_opp_2 5s linear infinite;
}
working example:
https://angular-ivy-5egh19.stackblitz.io