Re: [csswg-drafts] [scroll-animations-1] Entry/Exit Transitions for View Timeline effects (#7044)

> Longer term we could even accept these as keyframe offsets similar to how `from` and `to` map to 0% and 100% we could map `<timeline-phase-name> <percent>` to the appropriate offset of that point within the animation's overall duration.
> 
> e.g.
> 
> ```css
> @keyframes slide-in-out {
>   from { transform: translateY(100%); }
>   contain 0% { transform: none; }
>   contain 100% { transform: none; }
>   to { transform: translateY(-100%); }
> }
> ```
> 
> Of course open to bikeshedding the exact syntax.

Recently came up with something like this, which seems pretty similar:

```css
@keyframes reveal-somethingelse-unreveal {

  enter {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  contain {
    0% {
      …
    }
  }

  exit {
    to {
      opacity: 0;
    }
  }

  /* Regular keyframes, in case not linked to a view-timeline */
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
```

To my surprise [this syntax doesn't seem to break current implementations](https://codepen.io/bramus/pen/WNMyvxE/728adc1234af43c58560400c787f90ce), which is nice :)

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


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

Received on Friday, 3 June 2022 09:39:56 UTC