Animation Error 404 Page Not Found

In this example below you will see how to do a Animation Error 404 Page Not Found with some HTML / CSS and Javascript

Creating an Animation on the Error 404 Page Not Found by using CSS.

Thumbnail
This awesome code was written by Amli, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Amli ©
  • HTML
  • CSS
  • JavaScript
    <div class="text-error">
	<div class="center-text-box">
		<h1>Error ...</h1>
	</div>
</div>
	
<div class="container">
	<div class="center-numb-box">
		<div class="four_one"></div>
	</div>
</div>
	
<div class="container">
	<div class="center-numb-box_zero">
		<div class="zero">
      <div class="face"></div>
    </div>
	</div>
</div>
	
<div class="container">
	<div class="center-numb-box">
		<div class="four_two"></div>
	</div>
</div>
	
<div class="text-page-not-found">
	<div class="center-text-box">
		<h1>Page Not Found !!!</h1>
	</div>
</div>

/*Downloaded from https://www.codeseek.co/uzcho_/animation-error-404-page-not-found-XqVYMP */
    @charset "utf8";


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Root */
*,
*:after,
*:before,
html
	{box-sizing:border-box}

body{
	background:#000;
	margin:0;
	padding:0;
	overflow:hidden
	}

body,
html,
.zero
	{width:100%;height:100%}

h1{
	font-family:monospace, monospace;
	font-style:normal;
	font-weight:700;
	font-size:50px;
	letter-spacing:2px;
	overflow:hidden;
	white-space:nowrap;
	text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff
	}

[class*="text"]
	{width:100%;min-height:25%;text-align:center}

[class*="text"],
.container
	{display:block;position:relative;float:left}

.center-text-box{
	width:auto;
	padding:16px;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%)
	}

[class*="center"],
[class*="four"],
.zero,
.face
	{display:block;position:absolute}

[class*="center-numb"]
	{width:150px;height:200px}

[class*="center-numb"],
.face
	{top:50%;left:50%;transform:translate(-50%,-50%)}

[class*="four"]{
	background:#fff;
	width:10px;
	bottom:0;
	right:0;
	border-radius:5px
	}

.center-numb-box_zero:before,
.center-numb-box_zero:after,
.zero:before,
.zero:after,
[class*="four"]:before,
[class*="four"]:after,
.face:before,
.face:after{
	background:#fff;
	content:"";
	display:block;
	position:absolute;
	border-radius:5px
	}

[class*="four"]:before{
	height:10px;
	top:72%;
	left:-138px;
	transform:translate(0,-72%)
	}

[class*="four"]:after
	{width:10px;transform:rotate(45deg)}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ End Root */


/*                                     ! Animation Error 404 Page Not Found Start Here ...
=======================================================================================================================*/
.text-error h1
	{animation:typing 1s steps(40)}

.container
	{width:33.33333%;min-height:50%}

.four_one
	{animation:height 1s 1s linear both}

.four_one:before
	{animation:horizontal 1s 3s linear both}

.four_one:after
	{animation:diagonal 1s 2s linear both}

.center-numb-box_zero:before{
	width:10px;
	top:0;
	right:0;
	animation:height 1s 6s linear both
	}

.center-numb-box_zero:after{
	width:10px;
	bottom:0;
	left:0;
	animation:height 1s 4s linear both
	}

.zero:before{
	height:10px;
	top:0;
	left:0;
	animation:width 1s 5s linear both
	}

.zero:after{
	height:10px;
	bottom:0;
	right:0;
	animation:width 1s 7s linear both
	}

.face{
	height:30px;
	border-radius:50%;
	animation:mouth-sad 1s 13s linear both
	}

.face:before,
.face:after
	{height:2px;top:-25px}

.face:before
	{left:0;animation:eye-sad 1s 13s linear both}

.face:after
	{right:0;animation:eye-sad 1s 13s linear both}

.four_two
	{animation:height 1s 8s linear both}

.four_two:before
	{animation:horizontal 1s 10s linear both}

.four_two:after
	{animation:diagonal 1s 9s linear both}

.text-page-not-found h1
	{width:0;animation:typing 2s 11s steps(40) both}

@keyframes typing{
	from{width:0}
	to{width:100%}
	}

@keyframes width{
	from{width:0}
	to{width:100%}
	}

@keyframes height{
	from{height:0}
	to{height:100%}
	}

@keyframes horizontal{
	from{width:0}
	to{width:160px}
	}

@keyframes diagonal{
	from{height:0;top:0;left:0}
	to{height:204px;top:-30px;left:-69px}
	}

@keyframes mouth-sad{
	from{width:0;border-top:4px solid #000}
	to{width:50px;border-top:4px solid #fff}
	}

@keyframes eye-sad{
	from{width:0}
	to{width:15px}
	}


/*Downloaded from https://www.codeseek.co/uzcho_/animation-error-404-page-not-found-XqVYMP */
    

Comments