New CSS features for smooth entry and exit animations

[VBService]

In reference to this article: Four new CSS features for smooth entry and exit animations, what do you think about the new css properties?

Especially about these:

• @starting-style
• transition-behavior: allow-discrete;

an example: [ full code on-line ]

<style>
  body {
    background-image: url('https://picsum.photos/id/169/1080/720');
    background-size: cover;
    height: 100vh;
    overflow: hidden;
  }

  dialog {
    display: none;
    opacity: 0;
    translate: 0 -25vh;
    transition-property: overlay transform display opacity;
    transition-duration: 1s;
    transition-behavior: allow-discrete;
    transform: scaleX(0);
  }
  dialog::backdrop {
    background: repeating-linear-gradient(
      45deg,
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.2) 1px,
      rgba(0, 0, 0, 0.3) 1px,
      rgba(0, 0, 0, 0.3) 20px
    );
    backdrop-filter: blur(3px);
  }
  dialog[open] {
    display: block;
    translate: 0 0;
    opacity: 1;
    transform: scaleX(1);
  }
  #my-dialog-1 { 
    @starting-style {
      opacity: 0;
      translate: 0 25vh;
      transform: scaleX(0);
    }
  }
  #my-dialog-2 {
    @starting-style {
      opacity: 0;
      translate: 0 -25vh;
      transform: scaleX(0);
    }
  }
  #my-dialog-3 {
    @starting-style {
      opacity: 0;
      transform: scaleX(0);
    }
  }
</style>

<div id="open-dialog-buttons">
  <button id="open-dialog-1">Open Dialog 1</button>
  <button id="open-dialog-2">Open Dialog 2</button>
  <button id="open-dialog-3">Open Dialog 3</button>
</div>


<dialog id="my-dialog-1">
  <h1>Lorem!</h1>
  <p>This is a sample dialog 1.</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>
<dialog id="my-dialog-2">
  <h1>Lorem!</h1>
  <p>This is a sample dialog 2.</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>
<dialog id="my-dialog-3">
  <h1>Lorem!</h1>
  <p>This is a sample dialog 3.</p>
  <form method="dialog">
    <button>Close</button>
  </form>
</dialog>
<script>
  const openDialogButtons = document.querySelector('#open-dialog-buttons');

  openDialogButtons.addEventListener('click', (e) => {
    if (e.target.matches('button'))
      document.querySelector(`#${e.target.id.replace('open', 'my')}`).showModal();
  });
</script>

IMO: I can't wait until they are will be fully supported in all major browsers.


Useful links for this topic:

• Animations and transitions from and to display none with @starting-style
• Using @starting-style and transition-behavior for enter and exit stage effects
• The Yellow Fade Technique with Modern CSS using @starting-style

Can I use: [ @starting-style ] [ transition-behavior ] [ dialog ] [ ::backdrop ] [ repeating-linear-gradient ] [ backdrop-filter ]