Re: [csswg-drafts] [css-animations-2] Add animation-trigger for triggering animations when an element is in a timeline's range (#8942)

It's probably worth putting together a slide in from left, slide out to right example to explore how easily that is supported. I'm imagining it should look something like this:

```css
@keyframes slide-in-from-left {
  0% { transform: translateX(-100vw); }
}
@keyframes slide-out-to-right {
  100% { transform: translateX(100vw);
}
.target {
  animation: 
      /* slide-in-from-left should be active producing -100vw initially */
      slide-in-from-left 500ms backwards,
      /* slide-out-right is active after it triggers keeping the element at 100vw. */
      slide-out-to-right 500ms forwards;
  animation-trigger:
      /* Slide in at entry 100% (note [1], overlaps when slide-out is triggered). */
      view() alternate entry 100%,
      /* Slide out at exit 0%. */
      view() alternate exit 0%;
}
```

[1] Note, if you immediately scroll to a position after `exit 0%` both animations will be active effectively producing an animation from -100vw to 100vw (i.e. fly from left to right).

-- 
GitHub Notification of comment by flackr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8942#issuecomment-1854136740 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 13 December 2023 15:24:02 UTC