.main{
    animation-name: circle-in-hesitate;
    animation-duration: 2.5s;
}

@keyframes circle-in-hesitate {
    0% {
      clip-path: circle(0%);
    }
    40% {
      clip-path: circle(40%);
    }
    100% {
      clip-path: circle(125%);
    }
  }
  
  [transition-style="in:circle:hesitate"] {
    animation: 2.5s cubic-bezier(.25, 1, .30, 1) circle-in-hesitate both;
  }

  @keyframes wipe-in-right {
    from {
      clip-path: inset(0 100% 0 0);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }
  
  [transition-style="in:wipe:right"] {
    animation: 2.5s cubic-bezier(.25, 1, .30, 1) wipe-in-right both;
  }