Skip to content

Instantly share code, notes, and snippets.

@naturallucky
Created April 22, 2019 18:56
Show Gist options
  • Save naturallucky/0948a117dee95f2a9ad85e74ca7e25e2 to your computer and use it in GitHub Desktop.
Save naturallucky/0948a117dee95f2a9ad85e74ca7e25e2 to your computer and use it in GitHub Desktop.
<style>
/* I set more wider area.
you can also change parameters like this.
-100% -> 0%;
200% -> 100%;
each parameter are distance from : top right bottom left.
*/
@keyframes transition-showup-from-right{
0% {clip-path: inset(-100% -100% -100% 200%); }
30% {clip-path: inset(-100% -100% -100% 200%); }
60% {clip-path: inset(-100% -100% -100% -100%); }
100% {clip-path: inset(-100% -100% -100% -100%); }
}
@keyframes transition-showup-from-up{
0% {clip-path: inset(-100% -100% 200% -100%); }
30% {clip-path: inset(-100% -100% 200% -100%); }
60% {clip-path: inset(-100% -100% -100% -100%); }
100% {clip-path: inset(-100% -100% -100% -100%); }
}
@keyframes transition-showup-from-down{
0% {clip-path: inset( 200% -100% -100% -100%); }
30% {clip-path: inset( 200% -100% -100% -100%); }
60% {clip-path: inset(-100% -100% -100% -100%); }
100% {clip-path: inset(-100% -100% -100% -100%); }
}
</style>
<div class="parts " style="border:2pt solid blue; background:cyan; width:200pt;height:200pt; animation:5s ease-out 0s infinite forwards transition-showup-from-right;">
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment