Html Question posted in
Some basic documentation can be found here.

Html – I can't figure out why view based animation is not working

I’d like to make a CSS animation where the timeline is based on the view of the element. However, it won’t work, I already searched for it but no results.

I got a page with a container. In this container, "div.wrapper" is the thing I want to animate.
I tried removing overflow hidden and wrote this :

div.wrapper {
  width: 50%;
  height: 100%;
  background-color: red;
  animation: fadeIn linear;
  animation-timeline: view();
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
<div class="container">
  <div class="wrapper">
    <h2>Sans prise de tête...</h2>
    <p class="card"></p>
    <btn class="cta"></btn>
  </div>
  <div class="wrapper">
    <h2></h2>
    <p class="card"></p>
    <btn class="cta">Plus d'infos</btn>
  </div>
</div>

Can someone help please ?

Tags:

2

Answers


  1. 0

    Use animation-duration and other animation properties properly.

    div.wrapper {
    width: 50%;
    height: 100%;
    background-color: red;
    
    /* animation-name: fadeIn; */
    /* animation-duration: 2s; */
    /* animation-delay: 0s; */
    /* animation-timing-function: ease-in; */
    /* animation-iteration-count: 5; */

    animation: fadeIn 2s ease-in 5; /* <--- Shorthand of top animation properties*/
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
    Login or Signup to reply.
  2. 0

    animate-timeline: view() This is an experimental feature.

    References > CSS > animation-timeline > view()

    Experimental: This is an experimental technology
    Check the Browser compatibility table carefully before using this in production.

    As the effect is applied according to the view area, enough scroll space is required to ensure that the animation works well.

    body {
  height: 200vh;
}

.container {
  margin-top: 100vh;
}

div.wrapper {
  width: 50%;
  height: 100%;
  background-color: red;
  animation: fadeIn linear;
  animation-timeline: view();
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
    <p>Scroll this page</p>
<div class="container">
  <div class="wrapper">
    <h2>Sans prise de tête...</h2>
    <p class="card"></p>
    <btn class="cta"></btn>
  </div>
  <div class="wrapper">
    <h2></h2>
    <p class="card"></p>
    <btn class="cta">Plus d'infos</btn>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search