@keyframes growHorizontal {
	from { transform: scaleX(0.3); opacity: 0; }
	10% { transform: scaleX(0.3); opacity: 0.5; }
	to { transform: scaleX(1); opacity: 1; }
}

@keyframes growVertical {
	from { transform: scaleY(0); opacity: 0.5; }
	to { transform: scaleY(1); opacity: 1; }
}

.grow-right {
	animation: growHorizontal 2s ease-out 1.6s both;
	transform-origin: left 50%;
	transform-box: fill-box;
}

.grow-left {
	animation: growHorizontal 2s ease-out 1.6s both;
	transform-origin: right 50%;
	transform-box: fill-box;
}

.grow-down {
	animation: growVertical 2s ease-out 0s both;
	transform-origin: 50% top;
	transform-box: fill-box;
}

.grow-up {
	animation: growVertical 2s ease-out 0s both;
	transform-origin: 50% bottom;
	transform-box: fill-box;
}