Transitionground

Slide to right

👉


    .slideToRight {
      view-transition-name: slide-to-right-transition;
    }
    
    ::view-transition-old(slide-to-right-transition) {
      animation: slide-to-left 500ms ease-in-out 1 forwards;
    }
    
    ::view-transition-new(slide-to-right-transition) {
      animation: slide-from-right 500ms ease-in-out 1 forwards;
    }

    @keyframes slide-to-left {
      from {
        transform: translateX(0);
      }
      to {
        transform: translateX(-100%);
      }
    }

    @keyframes slide-from-right {
      from {
        transform: translateX(100%);
      }
      to {
        transform: translateX(0);
      }
    }