Portal from Rick and Morty

About

Do you like Rick and Morty? I do and made a cool portal in pure HTML and CSS.

Home page 
                        <!DOCTYPE html>
<html>
<head>
	<title>Rick and Morty Portal</title>
	<style>
		* {
			margin: 0;
			padding: 0;
			-webkit-box-sizing: border-box;
			        box-sizing: border-box;
		}

		body {
			background-color: #141414;
		}

		.portal {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 240px;
			margin: -120px;
			z-index: 1;
			-webkit-animation: 4s ease 0s infinite normal none running portal;
			        animation: 4s ease 0s infinite normal none running portal;
			pointer-events: none;
		}

		.portal__area {
			position: relative;
			width: 240px;
			transition: -webkit-transform 7s linear 0s;
			-webkit-transform: rotateZ(0deg);
			    -ms-transform: rotate(0deg);
			        transform: rotateZ(0deg);
			will-change: -webkit-transform;
			-webkit-animation: 4s linear 0s infinite normal none running spin;
			        animation: 4s linear 0s infinite normal none running spin;
		}

		.portal__boundary {
			position: absolute;
			top: 0px;
			left: 0;
			width: 240px;
			height: 240px;
			background-size: 240px 240px;
		}

		@-webkit-keyframes portal {
			0%, 100% {
			    opacity: 1;
			    -webkit-transform: translate3d(0, 0, 0) scale(0.94, 1);
			            transform: translate3d(0, 0, 0) scale(0.94, 1);
			}

			25% {
			    opacity: .92;
			    -webkit-transform: translate3d(0, -6px, 0) scale(0.94, 1.05);
			            transform: translate3d(0, -6px, 0) scale(0.94, 1.05);
			}
			50% {
			    opacity: 1;
			    -webkit-transform: translate3d(0, 4px, 0) scale(1, 1);
			            transform: translate3d(0, 4px, 0) scale(1, 1);
			}
			75% {
			    opacity: .9;
			    -webkit-transform: translate3d(0, -4px, 0) scale(0.94, 1.03);
			            transform: translate3d(0, -4px, 0) scale(0.94, 1.03);
			}
		}

		@keyframes portal {
			0%, 100% {
			    opacity: 1;
			    -webkit-transform: translate3d(0, 0, 0) scale(0.94, 1);
			            transform: translate3d(0, 0, 0) scale(0.94, 1);
			}

			25% {
			    opacity: .92;
			    -webkit-transform: translate3d(0, -6px, 0) scale(0.94, 1.05);
			            transform: translate3d(0, -6px, 0) scale(0.94, 1.05);
			}
			50% {
			    opacity: 1;
			    -webkit-transform: translate3d(0, 4px, 0) scale(1, 1);
			            transform: translate3d(0, 4px, 0) scale(1, 1);
			}
			75% {
			    opacity: .9;
			    -webkit-transform: translate3d(0, -4px, 0) scale(0.94, 1.03);
			            transform: translate3d(0, -4px, 0) scale(0.94, 1.03);
			}
		}

		@-webkit-keyframes spin {
			from {
				-webkit-transform: rotateZ(0);
				        transform: rotateZ(0);
			}
			to {
				-webkit-transform: rotateZ(360deg);
				        transform: rotateZ(360deg);
			}
		}

		@keyframes spin {
			from {
				-webkit-transform: rotateZ(0);
				        transform: rotateZ(0);
			}
			to {
				-webkit-transform: rotateZ(360deg);
				        transform: rotateZ(360deg);
			}
		}
	</style>
</head>
<body>

<div class="portal">
	<img class="portal__area" src="image/portal.png" alt="portal">
	<div class="portal__boundary" style="background-image: url(image/portal-boundary.png);"></div>
</div>

</body>
</html>