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 ?
2
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;
}
}
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>