@view-transition{navigation: auto;}#mask{view-transition-name:mask;position:fixed;z-index:50;top:0;right:0;bottom:0;left:0;background-color:#fe0;transform:translateY(-100%)}#mask.translated{transform:translateY(0)}html:active-view-transition-type(push) :root{view-transition-name:none}html:active-view-transition-type(push) #app{view-transition-name:content}html:active-view-transition-type(push) #mask{view-transition-name:mask}html:active-view-transition-type(push)::view-transition-old(content){z-index:1;animation-name:fade-out}html:active-view-transition-type(push)::view-transition-new(content){animation:none;display:none}html:active-view-transition-type(push)::view-transition-old(mask){animation:none;display:none}html:active-view-transition-type(push)::view-transition-new(mask){animation-name:slide-in-mask-from-top}html:active-view-transition-type(reload,forwards,backwards)::view-transition-old(root){animation-name:fade-out}html:active-view-transition-type(reload,forwards,backwards)::view-transition-new(root){animation-name:fade-in}@keyframes fade-in{0%{opacity:0}}@keyframes fade-out{to{opacity:0}}@keyframes slide-in-mask-from-top{to{translate:0 100%}}@keyframes slide-out-mask-to-bottom{to{translate:0 100%}}::view-transition-group(*){animation-duration:.5s}.animate-transition-mask-leave{animation:slide-out-mask-to-bottom .5s ease-out forwards}