@keyframes crecer {
	from {
		opacity: 0;
		scale: 50%;
	}

	to {
		opacity: 1;
		scale: 100%;
	}
}

.animCreciendo {
	view-timeline-name: --image;
	view-timeline-axis: block;

	animation-timeline: --image;
	animation-name: crecer;

	animation-range: entry 15% cover 30%;
	animation-fill-mode: both;
}

@keyframes desdeIzq {
	from {
		opacity: 0;
		transform: translate(-14rem);
	}

	to {
		opacity: 1;
		transform: translate(0);
	}
}

.animIzquierda {
	view-timeline-name: --image;
	view-timeline-axis: block;

	animation-timeline: --image;
	animation-name: desdeIzq;

	animation-range: entry 15% cover 30%;
	animation-fill-mode: both;
}

@keyframes desvanecer {
	from {
		opacity: 0;
		transform: translate(0,4rem);
	}

	to {
		opacity: 1;
		transform: translate(0);
	}
}

.animDesvanecido {
	view-timeline-name: --image;
	view-timeline-axis: block;

	animation-timeline: --image;
	animation-name: desvanecer;

	animation-range: entry 15% cover 30%;
	animation-fill-mode: both;
}