Animation-timeline view() – apparition d’une image
Animation-timeline view() – apparition d’une image
HTML
index.html <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">
CSS
style.css @layer demo {
img {
animation: fadein linear 0.5s;
animation-timeline: view();
opacity: 0;
}
@keyframes fadein {
to {
opacity: 1;
}
}
}
@layer demoStyles {
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
color: white;
height: 2000px;
}
img {
width: 600px;
}
}