::view-transition-new(root),::view-transition-old(root){animation-duration:.5s;animation-timing-function:ease-in-out}::view-transition-old(root){animation-name:fade-out}::view-transition-new(root){animation-name:fade-in}@keyframes fade-out{0%{opacity:1;filter:blur(0);transform:scale(1)}to{opacity:0;filter:blur(8px);transform:scale(.95)}}@keyframes fade-in{0%{opacity:0;filter:blur(8px);transform:scale(1.05)}to{opacity:1;filter:blur(0);transform:scale(1)}}[data-transition=left]{view-transition-name:slide-left}::view-transition-old(slide-left){animation-name:slide-out-left}::view-transition-new(slide-left){animation-name:slide-in-left}@keyframes slide-out-left{0%{transform:translateX(0)}to{transform:translateX(-100%)}}@keyframes slide-in-left{0%{transform:translateX(100%)}to{transform:translateX(0)}}[data-transition=right]{view-transition-name:slide-right}::view-transition-old(slide-right){animation-name:slide-out-right}::view-transition-new(slide-right){animation-name:slide-in-right}@keyframes slide-out-right{0%{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes slide-in-right{0%{transform:translateX(-100%)}to{transform:translateX(0)}}