html[data-slide]{overflow-x:clip}
html[data-slide] body{animation-duration:650ms;animation-timing-function:cubic-bezier(.22,.7,.22,1);animation-fill-mode:both}
html[data-slide="exit-right"] body{animation-name:slide-exit-right;animation-duration:480ms}
html[data-slide="exit-left"] body{animation-name:slide-exit-left;animation-duration:480ms}
html[data-slide="enter-right"] body{animation-name:slide-enter-right}
html[data-slide="enter-left"] body{animation-name:slide-enter-left}
@keyframes slide-exit-right{to{transform:translateX(100vw);opacity:0}}
@keyframes slide-exit-left{to{transform:translateX(-100vw);opacity:0}}
@keyframes slide-enter-right{from{transform:translateX(-100vw);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes slide-enter-left{from{transform:translateX(100vw);opacity:0}to{transform:translateX(0);opacity:1}}