OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

CSS animation-timeline: view() / scrolling not working

  • Thread starter Thread starter cube4d
  • Start date Start date
C

cube4d

Guest
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.

When it is like this, the colum background is green from beginning, and doesent change color, however i scroll and where the view is.

This is html:

Code:
    <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>
</section>

This is my css:

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

@keyframes fadeInTest {
  from {
    background-color: yellow;
  }
  to {
    background-color: green;
  }
}
<p>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.</p>
<p>When it is like this, the colum background is green from beginning, and doesent change color, however i scroll and where the view is.</p>
<p>This is html:</p>
<pre><code> <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>
</section>
</code></pre>
<p>This is my css:</p>
<pre><code>.test {
animation: fadeInTest linear forwards;
animation-timeline: view(250px);
}

@keyframes fadeInTest {
from {
background-color: yellow;
}
to {
background-color: green;
}
}
</code></pre>
Continue reading...
 

Latest posts

Top