argyleink / transition.css

:octocat: Drop-in CSS transitions

Home Page:https://transition.style

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Add cinematic transition

argyleink opened this issue · comments

Like hesitate, but goes to 16:9 in the middle

@keyframes wipe-cinematic-out {
  0% {
    clip-path: inset(0 0 0 0);
  }
  30%, 70% {
    clip-path: inset(10% 0 10% 0);
  }
  100% {
    clip-path: inset(100% 0 100% 0);
  }
}
@keyframes wipe-cinematic-in {
  0% {
    clip-path: inset(100% 0 100% 0);
  }
  30%, 70% {
    clip-path: inset(10% 0 10% 0);
  }
  100% {
    clip-path: inset(0 0 0 0);
  }
}

looks like it's just 2 new css custom props and then the work to teach all the parts of this build system to include the files