Belo is my python function created using python html. want to add this animation to html table but the issue is it is creating a lot of white space and also the design of the function is not as expected. can some one tell me how i can modefy this functon to make the design long and less white space:

def create_chevron_animation2(background_color="#06D001", height="50px"):
css_chevron = f"""
<style>
    .container {{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%; /* Increased width to 150% */
        height: {height}; /* Reduced height */
        position: relative;
        overflow: hidden;
        font-size: 0; 
    }}
    
    .chevron {{
        --chevron-size: 30px;
        position: absolute;
        width: calc(var(--chevron-size) * 4.0 * 0.5);
        height: calc(var(--chevron-size) * 0.4 * 1.0);
        font-size: var(--chevron-size);
        opacity: 0;
        transform: scale(0.1) rotate(90deg);
        animation: move-chevron 5s linear infinite;
    }}

    .chevron:nth-child(1) {{ animation-delay: 0.5s; }}
    .chevron:nth-child(2) {{ animation-delay: 1.0s; }}
    .chevron:nth-child(3) {{ animation-delay: 1.5s; }}
    .chevron:nth-child(4) {{ animation-delay: 2s; }}
    .chevron:nth-child(5) {{ animation-delay: 2.5s; }}
    .chevron:nth-child(6) {{ animation-delay: 3s; }}
    .chevron:nth-child(7) {{ animation-delay: 3.5s; }}
    .chevron:nth-child(8) {{ animation-delay: 4s; }}
    .chevron:nth-child(9) {{ animation-delay: 4.5s; }}
    .chevron:nth-child(10) {{ animation-delay: 5.0s; }}
    .chevron:before,
    .chevron:after {{
        content: '';
        position: absolute;
        top: 0;
        height: 100%;
        width: 50%;
        background: {background_color};
    }}

    .chevron:before {{
        left: 0;
        transform: skewY(-60deg);
    }}

    .chevron:after {{
        right: 0;
        transform: skewY(60deg);
    }}

    @keyframes move-chevron {{
        0% {{
            opacity: 0;
            transform: translateX(-10%) scale(0.1) rotate(90deg);
        }}
        20% {{
            opacity: 1;
            transform: translateX(calc(0.6rem * 10)) scale(1) rotate(90deg);
        }}
        60% {{
            opacity: 1;
            transform: translateX(calc(0.6rem * 20)) scale(1) rotate(90deg);
        }}
        100% {{
            opacity: 0;
            transform: translateX(calc(0.6rem * 30)) scale(0.5) rotate(90deg);
        }}
    }}
</style>
"""

html_chevron = """
<div class="container">
    <div class="chevron"></div>
    <div class="chevron"></div>
    <div class="chevron"></div>
    <div class="chevron"></div>
    <div class="chevron"></div>
    <div class="chevron"></div>
    <div class="chevron"></div>
    <div class="chevron"></div>
    <div class="chevron"></div>
    <div class="chevron"></div>
</div>
"""

This is what i expect inside the Html table in streamlit:

<div class="container">
  <div class="chevron"></div>
  <div class="chevron"></div>
  <div class="chevron"></div>
  <div class="chevron"></div>
  <div class="chevron"></div>
  <div class="chevron"></div>
  <div class="chevron"></div>
  <div class="chevron"></div>
  <div class="chevron"></div>
  <div class="chevron"></div>
</div>



$base: 0.6rem;

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.chevron {
  position: absolute;
  width: calc(#{$base} * 2.5);
  height: calc(#{$base} * 0.3);
  opacity: 0;
  transform: scale(0.1) rotate(90deg); /* Rotate to point right */
  animation: move-chevron 5s linear infinite; /* Smooth animation */
}

.chevron:nth-child(1) {
  animation-delay: 0s;
}

.chevron:nth-child(2) {
  animation-delay: 0.5s;
}

.chevron:nth-child(3) {
  animation-delay: 1s;
}

.chevron:nth-child(4) {
  animation-delay: 1.5s;
}

.chevron:nth-child(5) {
  animation-delay: 2s;
}

.chevron:nth-child(6) {
  animation-delay: 2.5s;
}

.chevron:nth-child(7) {
  animation-delay: 3s;
}

.chevron:nth-child(8) {
  animation-delay: 3.5s;
}

.chevron:nth-child(9) {
  animation-delay: 4s;
}

.chevron:nth-child(10) {
  animation-delay: 4.5s;
}

.chevron:before,
.chevron:after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  background: green; /* Uncommented and added the background */
}

.chevron:before {
  left: 0;
  transform: skewY(-60deg); /* Flip the skew to point right */
}

.chevron:after {
  right: 0;
  transform: skewY(60deg); /* Flip the skew to point right */
}

@keyframes move-chevron {
  0% {
    opacity: 0;
    transform: translateX(-10%) scale(0.1) rotate(90deg);
  }
  20% {
    opacity: 1;
    transform: translateX(calc(#{$base} * 10)) scale(1) rotate(90deg);
  }
  60% {
    opacity: 1;
    transform: translateX(calc(#{$base} * 20)) scale(1) rotate(90deg);
  }
  100% {
    opacity: 0;
    transform: translateX(calc(#{$base} * 30)) scale(0.5) rotate(90deg);
  }
}