Transitionground

Slide to left

👈


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

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

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