Re: [w3ctag/design-reviews] Entry and Exit Animations (Issue #829)

For the simple use case they indeed both work, however developers often prefer transitions for their ergonomic simplicity in dealing with arbitrary subsequent changes. For example, with the fade animation:

```css
@keyframes fade-in {
  0% { opacity: 0 }
}
dialog {
  animation: fade-in 0.4s;
}
```

1. Any subsequent changes to the opacity while it is animating in take effect immediately, even if `transition: opacity 0.4s;` is set.
2. If you hide the dialog while it is still progressing through the showing animation, a transition will implicitly reverse from the point it is currently at - and at the appropriate speed per [css-transitions-3.1](https://www.w3.org/TR/css-transitions-1/#reversing)

These behaviors are often desirable and much harder to get right with animations. For example, I put together a demo showing the difference between naively using animations vs transitions for entry and/or exit:
https://jsbin.com/coxewex/edit?html,css,output

You can see with an animation in and transition out the transition is completely skipped if the animation hasn't finished yet, and if you use an animation in both direction then it's not easy to prevent it from playing from the shown state.

-- 
Reply to this email directly or view it on GitHub:
https://github.com/w3ctag/design-reviews/issues/829#issuecomment-1604768316
You are receiving this because you are subscribed to this thread.

Message ID: <w3ctag/design-reviews/issues/829/1604768316@github.com>