.scrollbox
{
	width:100%;
	height:100%;
	min-height:100px;
	position:relative;
	z-index:1;
	aspect-ratio: 4/3;
}

.scrollbox.clipped
{
	overflow:hidden;
}

.scrollbox>*
{
	position:absolute;
	width:100%;
	height:100%;	
	transform: translate(0, 100%);
	z-index:2;
	opacity:0;
}

.scrollbox>.slidein
{
	animation: slidein 2s ease-in-out 1;
}

.scrollbox>.slideout
{
	animation: slideout 1s ease-in 1;
}

		@keyframes slidein {
    0% {
		transform: translate(0, 100%);
		z-index:2;
		opacity:0;
    }
	25% { opacity:0; }
    50% {
		transform: translate(0, 0);
		z-index:2;
		opacity:1;
    }
	100%  {
		transform: translate(0, 0%);
		z-index:1;
		opacity:1;
    }	
}	

		@keyframes slideout {
    0% {
		transform: translate(0, 0);
		z-index:1;
		opacity:1;
    }
    100% {
		transform: perspective(500px) rotateX(15deg) translateZ(-50px) translate3d(0,-100px,0);
		 transform-origin: 50% 100%;
		z-index:1;
		opacity:0;
    }
}