I have a page with a few sections, if i test it on my section itself it works when it comes to view, but i have a row with 2 colums in that section, when i try it with my colum it doesnt work. Maybe i do something wrong? …. the section is in my body tag.

This is html:

<section id="aufspur" class="text-center content-section" style="background: url('index-transformed.jpeg') center / cover no-repeat;">
<div class="container">
    <div class="row text-center">
        <div class="col-lg-4 offset-xl-0 mx-auto test" style="background: rgb(255,205,27);border-radius: 12px;box-shadow: 4px 4px 3px rgba(0,0,0,0.5);">
            <h1 style="color: rgb(0,0,0);font-family: Futura;font-size: 50px;margin-top: 30px;">auf spur</h1>
            <p style="font-family: Futura;font-size: 18px;margin-bottom: 0;"><span style="color: rgb(0, 0, 0);">This is my TEXT 1</span><br /><br /><span style="color: rgb(0, 0, 0);">TEXT 2</span><br /><br /></p>
            <p style="font-family: Futura;font-size: 18px;margin-bottom: 0;"><span style="color: rgb(0, 0, 0);">TEXT 3</span><br /><br /></p>
        </div>
        <div class="col"></div>
    </div>
</div>

This is my css:

.test {
  animation: fadeInTest linear forwards;
  animation-timeline: view(250px);
}

@keyframes fadeInTest {
  from {
    background-color: yellow;
  }
  to {
    background-color: green;
  }
}