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);
}
}