Animation-timeline view() – animation-range
Animation-timeline view() – animation-range
HTML
index.html <h1>Exemple title</h1>
<h2>Lorem ipsum dolor sit amet consectetur </h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo impedit dolores reiciendis culpa officia delectus in dignissimos suscipit maxime velit corporis fugiat alias unde animi quis, similique porro asperiores?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo impedit dolores reiciendis culpa officia delectus in dignissimos suscipit maxime velit corporis fugiat alias unde animi quis, similique porro asperiores?</p>
<h2>Lorem ipsum dolor sit amet consectetur </h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo impedit dolores reiciendis culpa officia delectus in dignissimos suscipit maxime velit corporis fugiat alias unde animi quis, similique porro asperiores?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo impedit dolores reiciendis culpa officia delectus in dignissimos suscipit maxime velit corporis fugiat alias unde animi quis, similique porro asperiores?</p>
<img src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80" alt="image" class="projects__img">
<h2>Lorem ipsum dolor sit amet consectetur </h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo impedit dolores reiciendis culpa officia delectus in dignissimos suscipit maxime velit corporis fugiat alias unde animi quis, similique porro asperiores?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo impedit dolores reiciendis culpa officia delectus in dignissimos suscipit maxime velit corporis fugiat alias unde animi quis, similique porro asperiores?</p>
<h2>Lorem ipsum dolor sit amet consectetur </h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo impedit dolores reiciendis culpa officia delectus in dignissimos suscipit maxime velit corporis fugiat alias unde animi quis, similique porro asperiores?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi quo impedit dolores reiciendis culpa officia delectus in dignissimos suscipit maxime velit corporis fugiat alias unde animi quis, similique porro asperiores?</p>
CSS
style.css @layer demo {
img {
animation: fadein linear 0.5s forwards;
animation-timeline: view();
animation-range: cover 0% contain 50%;
}
@keyframes fadein {
0% {
opacity: 0;
scale: 0;
}
100% {
opacity: 1;
scale: 1;
}
}
}
@layer demoStyles {
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
color: white;
max-width: 50vw;
margin-inline: auto;
font-size: 1.2rem;
}
h1,
h2 {
text-align: left;
}
img {
width: 600px;
}
p {
line-height: 2;
}
hr {
border: 0;
border-top: 1px dashed cyan;
width: 100%;
position: fixed;
background: transparent;
height: 0;
&.top {
top: 200px;
}
&.bottom {
bottom: 100px;
}
}
}