* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.slide-1, .slide-2 {
  position: absolute;
  width: 100%;
  top: 0;
  right 0;
}

img {
  width: 100%;
  height: auto;
}

@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: 1.5s cubic-bezier(.25, 1, .30, 1) wipe-in-right both;
}

@keyframes circle-in-center {
  from {
    clip-path: circle(0%);
  }
  to {
    clip-path: circle(125%);
  }
}

[transition-style="in:circle:center"] {
  animation: 5s cubic-bezier(.25, 1, .30, 1) circle-in-center both;
}