five-for-the-future/themes/pub/wporg/css/components/_404.scss

.error-404 {
	.page-title {
		text-align: center;
	}

	.page-content {
		text-align: center;

		.logo-swing {
			height: 10rem;
			margin: 6rem auto;
			position: relative;
			text-align: center;
			width: 10rem;

			.wp-logo {
				left: 0;
				max-width: none;
				position: absolute;
				top: 0;
				width: 10rem;
			}
		}
	}
}

@keyframes hinge {
	10% {
		width: 180px;
		height: 180px;
		transform: rotate3d(0, 0, 1, 0deg);
	}
	15% {
		width: 185px;
		height: 185px;
		transform: rotate3d(0, 0, 1, 0deg);
	}
	20% {
		width: 180px;
		height: 180px;
		transform: rotate3d(0, 0, 1, 5deg);
	}
	40% {
		transform-origin: top left;
		animation-timing-function: ease-in-out;
	}
	60% {
		transform: rotate3d(0, 0, 1, 40deg);
		transform-origin: top left;
		animation-timing-function: ease-in-out;
	}
	40%, 80% {
		transform: rotate3d(0, 0, 1, 60deg);
		transform-origin: top left;
		animation-timing-function: ease-in-out;
		opacity: 1;
	}
	to {
		transform: translate3d(0, 700px, 0);
		opacity: 0;
	}
}

.hinge {
	animation-duration: 2s;
	animation-name: hinge;
}