A Pen by lvdo

/*Downloaded from https://www.codeseek.co/billythediv/a-pen-by-lvdo-rzgRoG */
    .square {
	width: 100px;
	height: 100px;
	margin-top: 50px;
	border: 3px solid black;

	background: red;

	transform: scale(1);

	animation-name: square;
	animation-duration: 4s;
	
}

@keyframes square {
	0% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(calc(50vw - 50px)) scale(1);
	}
	40% {
		transform: translateX(calc(50vw - 50px)) scale(0);
	}
	41% {
		transform: translateX(calc(50vw - 50px)) scale(1);
	}
	60% {
		transform: translateX(calc(50vw - 50px)) rotate(0deg);
	}
	80% {
		transform: translateX(calc(50vw - 50px)) rotate(720deg);
	}
	100% {
		transform: translateX(calc(100vw - 100px));
	}
}

/*Downloaded from https://www.codeseek.co/billythediv/a-pen-by-lvdo-rzgRoG */