:root{--duration:2s}.line{width:1px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);animation:line-increase var(--duration) linear none}@keyframes line-increase{0%{height:0;background-color:#fff}20%{height:60vh;background-color:#fff}80%{height:60vh;background-color:#fff}to{height:100vh;background-color:hsla(0,0%,100%,.3)}}.left-half{animation:slide-left .5s ease-in-out forwards;animation-delay:var(--duration)}.right-half{animation:slide-right .5s ease-in-out forwards;animation-delay:var(--duration)}@keyframes slide-left{0%{transform:translateX(0);background-color:#000}to{transform:translateX(-100%);background-color:transparent}}@keyframes slide-right{0%{transform:translateX(0);background-color:#000}to{transform:translateX(100%);background-color:transparent}}.left-half,.right-half{transition:none}