@keyframes input-error { 0%, 20% { background-color: var(--input-error); } 50%, 100% { background-color: var(--background-above-1); } } @keyframes uprise { 0% { opacity: 0; filter: blur(2px); } 100% { opacity: 1; filter: blur(0px); } } @keyframes window-vertical-open { 0% { height: 0; opacity: 0; } 100% { height: var(--height, inherit); opacity: var(--opacity, 1); } } @keyframes window-vertical-close { 0% { height: var(--height, inherit); opacity: var(--opacity, 1); } 100% { height: 0; opacity: 0; } } .animation.window:not(.hidden, .horizontal) { overflow: hidden; animation-duration : .1s; animation-name : window-vertical-open; animation-fill-mode : forwards; animation-timing-function: ease-in; } .animation.window.hidden:not(.horizontal) { overflow: hidden; animation-duration : .05s; animation-name : window-vertical-close; animation-fill-mode : forwards; animation-timing-function: ease-out; }