transition-style/src/squares/in-bottom-right.css

just add water clip-path mask transitions

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

[transition-style="in:square:bottom-right"] {
  animation-name: square-in-bottom-right;
}