Re: [csswg-drafts] [css-animations-2, css-transitions-2] Entry and exit animations for top-layer elements (#8189)

Also, looking at the demo in the first comment, it seems like the issue isn't the top layer itself, but rather the individual adjustments the top layer makes. E.g. this CSS works perfectly:

```

@keyframes show {
  0% { 
    opacity: 0; 
  }
}

dialog[open] {
  animation: show 400ms;
  visibility: visible;
  /* UA-default opacity: 1; */
}

@keyframes close {
  0% {
    visibility: visible;
  }
  100% {
    /* Necessary to repeat display: block unless
       interpolation behavior is visibility-like
       preferring non-none value. */
    visibility: visible;
    opacity: 0; }
}

dialog {
  --duration: 400ms;
  animation: close 400ms;
  visibility: hidden;

  /* The UA applies the following while dialog is :modal,
     we need to preserve it during the animation. */
  display: block;
  position: fixed;
  inset-block-start: 0px;
  inset-block-end: 0px;
  max-width: calc((100% - 6px) - 2em);
  max-height: calc((100% - 6px) - 2em);
}
```

so it seems to me this is more about allowing the `display` CSS property to animate?

Also, if this is about having to repeat all the properties that the top layer sets, then don't we have the same issue with any HTML feature that sets UA styling? It seems to me than this is more a problem tied to `display` than top layer.





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


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

Received on Tuesday, 17 January 2023 06:30:18 UTC