::view-transition-old(root),::view-transition-new(root){animation-duration:.5s;animation-fill-mode:both;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{from{opacity:1}to{opacity:0}}@keyframes fade-in{from{opacity:0}to{opacity:1}}img{view-transition-name:image-transition}::view-transition-old(image-transition){animation:slide-out-left .5s ease-in-out}::view-transition-new(image-transition){animation:slide-in-right .5s ease-in-out}@keyframes slide-out-left{from{transform:translateX(0);opacity:1}to{transform:translateX(-20px);opacity:0}}@keyframes slide-in-right{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}h1,h2,h3{view-transition-name:heading-transition}::view-transition-old(heading-transition){animation:scale-down .4s ease-in-out}::view-transition-new(heading-transition){animation:scale-up .4s ease-in-out}@keyframes scale-down{from{transform:scale(1);opacity:1}to{transform:scale(0.95);opacity:0}}@keyframes scale-up{from{transform:scale(0.95);opacity:0}to{transform:scale(1);opacity:1}}div.content{view-transition-name:content-transition}::view-transition-old(content-transition){animation:slide-up .5s ease-in-out}::view-transition-new(content-transition){animation:slide-down .5s ease-in-out}@keyframes slide-up{from{transform:translateY(0);opacity:1}to{transform:translateY(-20px);opacity:0}}@keyframes slide-down{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}@supports(view-transition-name:none){::view-transition-group(*){animation-duration:.5s}}