css html transition

<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>