@keyframes square-in-top-left {
  from {
    clip-path: var(--square-bottom-right-out);
  }
  to {
    clip-path: var(--square-in);
  }
}

[transition-style="in:square:top-left"] {
  animation-name: square-in-top-left;
}