Zoom images on Scroll CSS Only

19. September 2024
Allgemein

@keyframes scale-a-lil {
  from {
    scale: .5;
  }
}
  
@media (prefers-reduced-motion: no-preference) {
  figure img {
    animation: scale-a-lil linear both;
    animation-timeline: view();
    animation-range: 25vh 75vh;
  }
}

A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view()

Frühere Beiträge