#Update: Meine Notizen werden jetzt mit scroll-driven animations eingeblendet. Ich wollte diese neue Browser API schon lange ausprobieren und meine eigene Webseite ist der beste Testraum, um neue technische Möglichkeiten auszuprobieren.
Die scroll() Timeline hat sofort funktioniert, aber die view() Timeline nicht. Es hat eine Weile gedauert bis ich herausgefunden habe, dass wenn ein parent element overflow: hidden hat, die view-Timeline nicht mehr funktioniert. Falls ihr also auch noch keine Erfahrung mit scroll-driven animations gemacht habt und eure view() timeline irgendwie nicht funktionieren will, dann schaut mal auf den Elternelementen nach, ob irgendwo overflow auf hidden gesetzt ist.
Die neuen #CSS-Zeilen für die Animation sehen übrigens so aus:
.note {
@media (prefers-reduced-motion: no-preference) {
animation: linear scale-up;
animation-timeline: view();
animation-range: entry 0% entry 50%;
}
}
@keyframes scale-up {
from {
opacity: 0.5;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}