Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="zip">
	<div class="zip"></div>
</div>
              
            
!

CSS

              
                * {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	font-size: 20px;
}
body {
	background: linear-gradient(45deg,#aecef4,#2f64e4) 0 0 / 100% 100%;
	display: flex;
	font: 1em/1.5 serif;
	height: 100vh;
}
.zip, .zip:after {
	animation-duration: 3s;
	animation-iteration-count: infinite;
}
.zip {
	animation-name: pullRight;
	animation-timing-function: steps(8);
	background:
		linear-gradient(#fdff99,#fdff99) 0.3em 0.2em / 1.2em 0.2em no-repeat,
		linear-gradient(#fdff99,#fdff99) 0.2em 0.6em / 2.8em 1.9em no-repeat;
	margin: auto;
	position: relative;
	width: 3.2em;
	height: 2.7em;
}
.zip:before, .zip:after {
	content: "";
	position: absolute;
	width: 0.1em;
	height: 0.1em;
	transform: translate(-0.1em,-0.1em);
}
.zip:before {
	box-shadow:
		0.5em 0.1em 0 #999902,
		0.6em 0.1em 0 #999902,
		0.7em 0.1em 0 #999902,
		0.8em 0.1em 0 #999902,
		0.9em 0.1em 0 #999902,
		1.0em 0.1em 0 #999902,
		1.1em 0.1em 0 #999902,
		1.2em 0.1em 0 #999902,
		1.3em 0.1em 0 #999902,
		1.4em 0.1em 0 #323300,
		0.4em 0.2em 0 #999902,
		0.5em 0.2em 0 #f8f8f8,
		0.6em 0.2em 0 #f8f8f8,
		0.7em 0.2em 0 #f8f8f8,
		0.8em 0.2em 0 #f8f8f8,
		0.9em 0.2em 0 #f8f8f8,
		1.0em 0.2em 0 #f8f8f8,
		1.1em 0.2em 0 #f8f8f8,
		1.2em 0.2em 0 #f8f8f8,
		1.3em 0.2em 0 #f8f8f8,
		1.4em 0.2em 0 #999902,
		1.5em 0.2em 0 #323300,
		0.3em 0.3em 0 #999902,
		0.4em 0.3em 0 #f8f8f8,
		1.5em 0.3em 0 #999902,
		1.6em 0.3em 0 #323300,
		0.2em 0.4em 0 #999902,
		0.3em 0.4em 0 #f8f8f8,
		1.6em 0.4em 0 #999902,
		1.7em 0.4em 0 #323300,
		0.1em 0.5em 0 #999902,
		0.2em 0.5em 0 #cccc66,
		0.3em 0.5em 0 #cccc66,
		0.4em 0.5em 0 #cccc66,
		0.5em 0.5em 0 #cccc66,
		0.6em 0.5em 0 #cccc66,
		0.7em 0.5em 0 #cccc66,
		0.8em 0.5em 0 #cccc66,
		0.9em 0.5em 0 #cccc66,
		1.0em 0.5em 0 #cccc66,
		1.1em 0.5em 0 #cccc66,
		1.2em 0.5em 0 #cccc66,
		1.3em 0.5em 0 #cccc66,
		1.4em 0.5em 0 #cccc66,
		1.5em 0.5em 0 #cccc66,
		1.6em 0.5em 0 #cccc66,
		1.7em 0.5em 0 #999902,
		1.8em 0.5em 0 #999902,
		1.9em 0.5em 0 #999902,
		2.0em 0.5em 0 #999902,
		2.1em 0.5em 0 #999902,
		2.2em 0.5em 0 #999902,
		2.3em 0.5em 0 #999902,
		2.4em 0.5em 0 #999902,
		2.5em 0.5em 0 #999902,
		2.6em 0.5em 0 #999902,
		2.7em 0.5em 0 #999902,
		2.8em 0.5em 0 #999902,
		2.9em 0.5em 0 #999902,
		3.0em 0.5em 0 #999902,
		0.1em 0.6em 0 #999902,
		0.2em 0.6em 0 #f8f8f8,
		0.3em 0.6em 0 #f8f8f8,
		0.4em 0.6em 0 #f8f8f8,
		0.5em 0.6em 0 #f8f8f8,
		0.6em 0.6em 0 #f8f8f8,
		1.4em 0.6em 0 #f8f8f8,
		1.5em 0.6em 0 #f8f8f8,
		1.6em 0.6em 0 #f8f8f8,
		1.7em 0.6em 0 #f8f8f8,
		1.8em 0.6em 0 #f8f8f8,
		1.9em 0.6em 0 #f8f8f8,
		2.0em 0.6em 0 #f8f8f8,
		2.1em 0.6em 0 #f8f8f8,
		2.2em 0.6em 0 #f8f8f8,
		2.3em 0.6em 0 #f8f8f8,
		2.4em 0.6em 0 #f8f8f8,
		2.5em 0.6em 0 #f8f8f8,
		2.6em 0.6em 0 #f8f8f8,
		2.7em 0.6em 0 #f8f8f8,
		2.8em 0.6em 0 #f8f8f8,
		2.9em 0.6em 0 #f8f8f8,
		3.0em 0.6em 0 #f8f8f8,
		3.1em 0.6em 0 #323300,
		0.1em 0.7em 0 #999902,
		0.2em 0.7em 0 #f8f8f8,
		2.2em 0.7em 0 #fccc99,
		2.5em 0.7em 0 #fccc99,
		2.9em 0.7em 0 #fccc99,
		3.1em 0.7em 0 #cccc66,
		3.2em 0.7em 0 #323300,
		0.1em 0.8em 0 #999902,
		0.2em 0.8em 0 #f8f8f8,
		1.6em 0.8em 0 #fccc99,
		1.8em 0.8em 0 #fccc99,
		2.0em 0.8em 0 #fccc99,
		2.4em 0.8em 0 #fccc99,
		2.8em 0.8em 0 #fccc99,
		3.0em 0.8em 0 #fccc99,
		3.1em 0.8em 0 #cccc66,
		3.2em 0.8em 0 #323300,
		0.1em 0.9em 0 #999902,
		0.2em 0.9em 0 #f8f8f8,
		2.3em 0.9em 0 #fccc99,
		2.6em 0.9em 0 #fccc99,
		2.7em 0.9em 0 #fccc99,
		3.1em 0.9em 0 #cccc66,
		3.2em 0.9em 0 #323300,
		0.1em 1.0em 0 #999902,
		0.2em 1.0em 0 #f8f8f8,
		1.9em 1.0em 0 #fccc99,
		2.1em 1.0em 0 #fccc99,
		2.5em 1.0em 0 #fccc99,
		3.0em 1.0em 0 #fccc99,
		3.1em 1.0em 0 #cccc66,
		3.2em 1.0em 0 #323300,
		0.1em 1.1em 0 #999902,
		0.2em 1.1em 0 #f8f8f8,
		1.5em 1.1em 0 #fccc99,
		1.7em 1.1em 0 #fccc99,
		2.6em 1.1em 0 #fccc99,
		2.8em 1.1em 0 #fccc99,
		3.0em 1.1em 0 #fccc99,
		3.1em 1.1em 0 #cccc66,
		3.2em 1.1em 0 #323300,
		0.1em 1.2em 0 #999902,
		0.2em 1.2em 0 #f8f8f8,
		1.9em 1.2em 0 #fccc99,
		2.1em 1.2em 0 #fccc99,
		2.3em 1.2em 0 #fccc99,
		2.5em 1.2em 0 #fccc99,
		2.9em 1.2em 0 #fccc99,
		3.1em 1.2em 0 #cccc66,
		3.2em 1.2em 0 #323300,
		0.1em 1.3em 0 #999902,
		0.2em 1.3em 0 #f8f8f8,
		1.6em 1.3em 0 #fccc99,
		2.4em 1.3em 0 #fccc99,
		2.7em 1.3em 0 #fccc99,
		2.8em 1.3em 0 #fccc99,
		3.0em 1.3em 0 #fccc99,
		3.1em 1.3em 0 #cccc66,
		3.2em 1.3em 0 #323300,
		0.1em 1.4em 0 #999902,
		0.2em 1.4em 0 #f8f8f8,
		1.4em 1.4em 0 #fccc99,
		1.7em 1.4em 0 #fccc99,
		1.9em 1.4em 0 #fccc99,
		2.2em 1.4em 0 #fccc99,
		2.5em 1.4em 0 #fccc99,
		2.9em 1.4em 0 #fccc99,
		3.1em 1.4em 0 #cccc66,
		3.2em 1.4em 0 #323300,
		0.1em 1.5em 0 #999902,
		0.2em 1.5em 0 #f8f8f8,
		2.1em 1.5em 0 #fccc99,
		2.3em 1.5em 0 #fccc99,
		2.6em 1.5em 0 #fccc99,
		2.7em 1.5em 0 #fccc99,
		3.0em 1.5em 0 #fccc99,
		3.1em 1.5em 0 #cccc66,
		3.2em 1.5em 0 #323300,
		0.1em 1.6em 0 #999902,
		0.2em 1.6em 0 #f8f8f8,
		1.5em 1.6em 0 #fccc99,
		1.7em 1.6em 0 #fccc99,
		1.8em 1.6em 0 #fccc99,
		2.0em 1.6em 0 #fccc99,
		2.5em 1.6em 0 #fccc99,
		2.8em 1.6em 0 #fccc99,
		2.9em 1.6em 0 #fccc99,
		3.1em 1.6em 0 #cccc66,
		3.2em 1.6em 0 #323300,
		0.1em 1.7em 0 #999902,
		0.2em 1.7em 0 #f8f8f8,
		2.1em 1.7em 0 #fccc99,
		2.3em 1.7em 0 #fccc99,
		2.4em 1.7em 0 #fccc99,
		2.6em 1.7em 0 #fccc99,
		2.7em 1.7em 0 #fccc99,
		2.8em 1.7em 0 #fccc99,
		3.0em 1.7em 0 #fccc99,
		3.1em 1.7em 0 #cccc66,
		3.2em 1.7em 0 #323300,
		0.1em 1.8em 0 #999902,
		0.2em 1.8em 0 #f8f8f8,
		1.5em 1.8em 0 #fccc99,
		1.7em 1.8em 0 #fccc99,
		1.9em 1.8em 0 #fccc99,
		2.2em 1.8em 0 #fccc99,
		2.5em 1.8em 0 #fccc99,
		2.8em 1.8em 0 #fccc99,
		2.9em 1.8em 0 #fccc99,
		3.0em 1.8em 0 #fccc99,
		3.1em 1.8em 0 #cccc66,
		3.2em 1.8em 0 #323300,
		0.1em 1.9em 0 #999902,
		0.2em 1.9em 0 #f8f8f8,
		1.8em 1.9em 0 #fccc99,
		2.0em 1.9em 0 #fccc99,
		2.1em 1.9em 0 #fccc99,
		2.3em 1.9em 0 #fccc99,
		2.4em 1.9em 0 #fccc99,
		2.6em 1.9em 0 #fccc99,
		2.7em 1.9em 0 #fccc99,
		2.9em 1.9em 0 #fccc99,
		3.1em 1.9em 0 #cccc66,
		3.2em 1.9em 0 #323300,
		0.1em 2.0em 0 #999902,
		0.2em 2.0em 0 #f8f8f8,
		0.4em 2.0em 0 #fccc99,
		0.6em 2.0em 0 #fccc99,
		1.4em 2.0em 0 #fccc99,
		1.6em 2.0em 0 #fccc99,
		2.2em 2.0em 0 #fccc99,
		2.3em 2.0em 0 #fccc99,
		2.4em 2.0em 0 #fccc99,
		2.5em 2.0em 0 #fccc99,
		2.7em 2.0em 0 #fccc99,
		2.8em 2.0em 0 #fccc99,
		2.9em 2.0em 0 #fccc99,
		3.0em 2.0em 0 #fccc99,
		3.1em 2.0em 0 #cccc66,
		3.2em 2.0em 0 #323300,
		0.1em 2.1em 0 #999902,
		0.2em 2.1em 0 #f8f8f8,
		1.5em 2.1em 0 #fccc99,
		1.7em 2.1em 0 #fccc99,
		1.8em 2.1em 0 #fccc99,
		2.0em 2.1em 0 #fccc99,
		2.1em 2.1em 0 #fccc99,
		2.5em 2.1em 0 #fccc99,
		2.6em 2.1em 0 #fccc99,
		2.7em 2.1em 0 #fccc99,
		2.8em 2.1em 0 #fccc99,
		3.0em 2.1em 0 #fccc99,
		3.1em 2.1em 0 #cccc66,
		3.2em 2.1em 0 #323300,
		0.1em 2.2em 0 #999902,
		0.2em 2.2em 0 #f8f8f8,
		0.5em 2.2em 0 #fccc99,
		1.4em 2.2em 0 #fccc99,
		1.6em 2.2em 0 #fccc99,
		1.9em 2.2em 0 #fccc99,
		2.2em 2.2em 0 #fccc99,
		2.3em 2.2em 0 #fccc99,
		2.4em 2.2em 0 #fccc99,
		2.6em 2.2em 0 #fccc99,
		2.9em 2.2em 0 #fccc99,
		3.0em 2.2em 0 #fccc99,
		3.1em 2.2em 0 #cccc66,
		3.2em 2.2em 0 #323300,
		0.1em 2.3em 0 #999902,
		0.2em 2.3em 0 #f8f8f8,
		0.3em 2.3em 0 #fccc99,
		1.6em 2.3em 0 #fccc99,
		1.8em 2.3em 0 #fccc99,
		2.1em 2.3em 0 #fccc99,
		2.2em 2.3em 0 #fccc99,
		2.3em 2.3em 0 #fccc99,
		2.5em 2.3em 0 #fccc99,
		2.6em 2.3em 0 #fccc99,
		2.7em 2.3em 0 #fccc99,
		2.8em 2.3em 0 #fccc99,
		2.9em 2.3em 0 #fccc99,
		3.0em 2.3em 0 #fccc99,
		3.1em 2.3em 0 #cccc66,
		3.2em 2.3em 0 #323300,
		0.1em 2.4em 0 #999902,
		0.2em 2.4em 0 #f8f8f8,
		0.6em 2.4em 0 #fccc99,
		1.4em 2.4em 0 #fccc99,
		1.5em 2.4em 0 #fccc99,
		1.7em 2.4em 0 #fccc99,
		1.9em 2.4em 0 #fccc99,
		2.0em 2.4em 0 #fccc99,
		2.3em 2.4em 0 #fccc99,
		2.4em 2.4em 0 #fccc99,
		2.5em 2.4em 0 #fccc99,
		2.7em 2.4em 0 #fccc99,
		2.8em 2.4em 0 #fccc99,
		2.9em 2.4em 0 #fccc99,
		3.0em 2.4em 0 #fccc99,
		3.1em 2.4em 0 #cccc66,
		3.2em 2.4em 0 #323300,
		0.1em 2.5em 0 #999902,
		0.2em 2.5em 0 #f8f8f8,
		0.3em 2.5em 0 #fccc99,
		0.5em 2.5em 0 #fccc99,
		1.6em 2.5em 0 #fccc99,
		1.8em 2.5em 0 #fccc99,
		2.1em 2.5em 0 #fccc99,
		2.2em 2.5em 0 #fccc99,
		2.4em 2.5em 0 #fccc99,
		2.6em 2.5em 0 #fccc99,
		2.7em 2.5em 0 #fccc99,
		2.8em 2.5em 0 #fccc99,
		3.0em 2.5em 0 #fccc99,
		3.1em 2.5em 0 #cccc66,
		3.2em 2.5em 0 #323300,
		0.1em 2.6em 0 #999902,
		0.2em 2.6em 0 #cccc66,
		0.3em 2.6em 0 #cccc66,
		0.4em 2.6em 0 #cccc66,
		0.5em 2.6em 0 #cccc66,
		0.6em 2.6em 0 #cccc66,
		0.7em 2.6em 0 #cccc66,
		0.8em 2.6em 0 #cccc66,
		0.9em 2.6em 0 #cccc66,
		1.0em 2.6em 0 #cccc66,
		1.1em 2.6em 0 #cccc66,
		1.2em 2.6em 0 #cccc66,
		1.3em 2.6em 0 #cccc66,
		1.4em 2.6em 0 #cccc66,
		1.5em 2.6em 0 #cccc66,
		1.6em 2.6em 0 #cccc66,
		1.7em 2.6em 0 #cccc66,
		1.8em 2.6em 0 #cccc66,
		1.9em 2.6em 0 #cccc66,
		2.0em 2.6em 0 #cccc66,
		2.1em 2.6em 0 #cccc66,
		2.2em 2.6em 0 #cccc66,
		2.3em 2.6em 0 #cccc66,
		2.4em 2.6em 0 #cccc66,
		2.5em 2.6em 0 #cccc66,
		2.6em 2.6em 0 #cccc66,
		2.7em 2.6em 0 #cccc66,
		2.8em 2.6em 0 #cccc66,
		2.9em 2.6em 0 #cccc66,
		3.0em 2.6em 0 #cccc66,
		3.1em 2.6em 0 #cccc66,
		3.2em 2.6em 0 #323300,
		0.2em 2.7em 0 #323300,
		0.3em 2.7em 0 #323300,
		0.4em 2.7em 0 #323300,
		0.5em 2.7em 0 #323300,
		0.6em 2.7em 0 #323300,
		0.7em 2.7em 0 #323300,
		0.8em 2.7em 0 #323300,
		0.9em 2.7em 0 #323300,
		1.0em 2.7em 0 #323300,
		1.1em 2.7em 0 #323300,
		1.2em 2.7em 0 #323300,
		1.3em 2.7em 0 #323300,
		1.4em 2.7em 0 #323300,
		1.5em 2.7em 0 #323300,
		1.6em 2.7em 0 #323300,
		1.7em 2.7em 0 #323300,
		1.8em 2.7em 0 #323300,
		1.9em 2.7em 0 #323300,
		2.0em 2.7em 0 #323300,
		2.1em 2.7em 0 #323300,
		2.2em 2.7em 0 #323300,
		2.3em 2.7em 0 #323300,
		2.4em 2.7em 0 #323300,
		2.5em 2.7em 0 #323300,
		2.6em 2.7em 0 #323300,
		2.7em 2.7em 0 #323300,
		2.8em 2.7em 0 #323300,
		2.9em 2.7em 0 #323300,
		3.0em 2.7em 0 #323300,
		3.1em 2.7em 0 #323300,
		0.7em 0.6em 0 #c0c0c0,
		0.8em 0.6em 0 #c0c0c0,
		0.9em 0.6em 0 #868686,
		1.0em 0.6em 0 #fdff99,
		1.1em 0.6em 0 #868686,
		1.2em 0.6em 0 #c0c0c0,
		1.3em 0.6em 0 #c0c0c0,
		0.7em 0.7em 0 #868686,
		0.8em 0.7em 0 #868686,
		0.9em 0.7em 0 #000000,
		1.1em 0.7em 0 #000000,
		1.2em 0.7em 0 #868686,
		1.3em 0.7em 0 #868686,
		0.7em 0.8em 0 #c0c0c0,
		0.8em 0.8em 0 #c0c0c0,
		0.9em 0.8em 0 #868686,
		1.1em 0.8em 0 #868686,
		1.2em 0.8em 0 #c0c0c0,
		1.3em 0.8em 0 #c0c0c0,
		0.7em 0.9em 0 #868686,
		0.8em 0.9em 0 #868686,
		0.9em 0.9em 0 #000000,
		1.1em 0.9em 0 #000000,
		1.2em 0.9em 0 #868686,
		1.3em 0.9em 0 #868686,
		0.7em 1.0em 0 #c0c0c0,
		0.8em 1.0em 0 #c0c0c0,
		0.9em 1.0em 0 #868686,
		1.1em 1.0em 0 #868686,
		1.2em 1.0em 0 #c0c0c0,
		1.3em 1.0em 0 #c0c0c0,
		0.7em 1.1em 0 #868686,
		0.8em 1.1em 0 #868686,
		0.9em 1.1em 0 #000000,
		1.1em 1.1em 0 #000000,
		1.2em 1.1em 0 #868686,
		1.3em 1.1em 0 #868686,
		0.7em 1.2em 0 #c0c0c0,
		0.8em 1.2em 0 #c0c0c0,
		0.9em 1.2em 0 #868686,
		1.1em 1.2em 0 #868686,
		1.2em 1.2em 0 #c0c0c0,
		1.3em 1.2em 0 #c0c0c0,
		0.7em 1.3em 0 #868686,
		0.8em 1.3em 0 #868686,
		0.9em 1.3em 0 #000000,
		1.1em 1.3em 0 #000000,
		1.2em 1.3em 0 #868686,
		1.3em 1.3em 0 #868686,
		0.7em 1.4em 0 #c0c0c0,
		0.8em 1.4em 0 #c0c0c0,
		0.9em 1.4em 0 #868686,
		1.1em 1.4em 0 #868686,
		1.2em 1.4em 0 #c0c0c0,
		1.3em 1.4em 0 #c0c0c0,
		0.7em 1.5em 0 #868686,
		0.8em 1.5em 0 #868686,
		0.9em 1.5em 0 #000000,
		1.1em 1.5em 0 #000000,
		1.2em 1.5em 0 #868686,
		1.3em 1.5em 0 #868686,
		0.7em 1.6em 0 #c0c0c0,
		0.8em 1.6em 0 #c0c0c0,
		0.9em 1.6em 0 #868686,
		1.1em 1.6em 0 #868686,
		1.2em 1.6em 0 #c0c0c0,
		1.3em 1.6em 0 #c0c0c0,
		0.7em 1.7em 0 #868686,
		0.8em 1.7em 0 #868686,
		0.9em 1.7em 0 #000000,
		1.1em 1.7em 0 #000000,
		1.2em 1.7em 0 #868686,
		1.3em 1.7em 0 #868686,
		0.7em 1.8em 0 #c0c0c0,
		0.8em 1.8em 0 #c0c0c0,
		0.9em 1.8em 0 #868686,
		1.1em 1.8em 0 #868686,
		1.2em 1.8em 0 #c0c0c0,
		1.3em 1.8em 0 #c0c0c0,
		0.7em 1.9em 0 #868686,
		0.8em 1.9em 0 #868686,
		0.9em 1.9em 0 #000000,
		1.1em 1.9em 0 #000000,
		1.2em 1.9em 0 #868686,
		1.3em 1.9em 0 #868686,
		0.7em 2.0em 0 #c0c0c0,
		0.8em 2.0em 0 #c0c0c0,
		0.9em 2.0em 0 #868686,
		1.1em 2.0em 0 #868686,
		1.2em 2.0em 0 #c0c0c0,
		1.3em 2.0em 0 #c0c0c0,
		0.7em 2.1em 0 #868686,
		0.8em 2.1em 0 #868686,
		0.9em 2.1em 0 #000000,
		1.1em 2.1em 0 #000000,
		1.2em 2.1em 0 #868686,
		1.3em 2.1em 0 #868686,
		0.7em 2.2em 0 #c0c0c0,
		0.8em 2.2em 0 #c0c0c0,
		0.9em 2.2em 0 #868686,
		1.1em 2.2em 0 #868686,
		1.2em 2.2em 0 #c0c0c0,
		1.3em 2.2em 0 #c0c0c0,
		0.7em 2.3em 0 #868686,
		0.8em 2.3em 0 #868686,
		0.9em 2.3em 0 #000000,
		1.1em 2.3em 0 #000000,
		1.2em 2.3em 0 #868686,
		1.3em 2.3em 0 #868686,
		0.7em 2.4em 0 #c0c0c0,
		0.8em 2.4em 0 #c0c0c0,
		0.9em 2.4em 0 #868686,
		1.1em 2.4em 0 #868686,
		1.2em 2.4em 0 #c0c0c0,
		1.3em 2.4em 0 #c0c0c0,
		0.7em 2.5em 0 #868686,
		0.8em 2.5em 0 #868686,
		0.9em 2.5em 0 #000000,
		1.1em 2.5em 0 #000000,
		1.2em 2.5em 0 #868686,
		1.3em 2.5em 0 #868686;
	top: 0;
	left: 0;
}
.zip:after {
	animation-name: pullDown;
	animation-timing-function: steps(7);
	box-shadow:
		0.4em 0.1em 0 #868686,
		0.3em 0.2em 0 #868686,
		0.4em 0.2em 0 #c0c0c0,
		0.5em 0.2em 0 #000000,
		0.2em 0.3em 0 #868686,
		0.3em 0.3em 0 #868686,
		0.4em 0.3em 0 #c0c0c0,
		0.5em 0.3em 0 #000000,
		0.6em 0.3em 0 #000000,
		0.1em 0.4em 0 #868686,
		0.2em 0.4em 0 #c0c0c0,
		0.3em 0.4em 0 #868686,
		0.4em 0.4em 0 #c0c0c0,
		0.5em 0.4em 0 #000000,
		0.6em 0.4em 0 #c0c0c0,
		0.7em 0.4em 0 #000000,
		0.1em 0.5em 0 #868686,
		0.2em 0.5em 0 #c0c0c0,
		0.3em 0.5em 0 #868686,
		0.4em 0.5em 0 #c0c0c0,
		0.5em 0.5em 0 #000000,
		0.6em 0.5em 0 #c0c0c0,
		0.7em 0.5em 0 #000000,
		0.1em 0.6em 0 #868686,
		0.2em 0.6em 0 #c0c0c0,
		0.3em 0.6em 0 #868686,
		0.4em 0.6em 0 #c0c0c0,
		0.5em 0.6em 0 #000000,
		0.6em 0.6em 0 #c0c0c0,
		0.7em 0.6em 0 #000000,
		0.1em 0.7em 0 #868686,
		0.2em 0.7em 0 #c0c0c0,
		0.3em 0.7em 0 #868686,
		0.4em 0.7em 0 #000000,
		0.5em 0.7em 0 #868686,
		0.6em 0.7em 0 #c0c0c0,
		0.7em 0.7em 0 #000000,
		0.1em 0.8em 0 #868686,
		0.2em 0.8em 0 #c0c0c0,
		0.3em 0.8em 0 #868686,
		0.5em 0.8em 0 #868686,
		0.6em 0.8em 0 #c0c0c0,
		0.7em 0.8em 0 #000000,
		0.1em 0.9em 0 #868686,
		0.2em 0.9em 0 #c0c0c0,
		0.3em 0.9em 0 #868686,
		0.4em 0.9em 0 #868686,
		0.5em 0.9em 0 #868686,
		0.6em 0.9em 0 #c0c0c0,
		0.7em 0.9em 0 #000000,
		0.1em 1.0em 0 #868686,
		0.2em 1.0em 0 #c0c0c0,
		0.3em 1.0em 0 #c0c0c0,
		0.4em 1.0em 0 #c0c0c0,
		0.5em 1.0em 0 #c0c0c0,
		0.6em 1.0em 0 #c0c0c0,
		0.7em 1.0em 0 #000000,
		0.1em 1.1em 0 #868686,
		0.2em 1.1em 0 #c0c0c0,
		0.3em 1.1em 0 #000000,
		0.4em 1.1em 0 #000000,
		0.5em 1.1em 0 #000000,
		0.6em 1.1em 0 #c0c0c0,
		0.7em 1.1em 0 #000000,
		0.1em 1.2em 0 #868686,
		0.2em 1.2em 0 #c0c0c0,
		0.3em 1.2em 0 #000000,
		0.5em 1.2em 0 #868686,
		0.6em 1.2em 0 #c0c0c0,
		0.7em 1.2em 0 #000000,
		0.1em 1.3em 0 #868686,
		0.2em 1.3em 0 #c0c0c0,
		0.3em 1.3em 0 #000000,
		0.5em 1.3em 0 #868686,
		0.6em 1.3em 0 #c0c0c0,
		0.7em 1.3em 0 #000000,
		0.1em 1.4em 0 #868686,
		0.2em 1.4em 0 #c0c0c0,
		0.3em 1.4em 0 #000000,
		0.5em 1.4em 0 #868686,
		0.6em 1.4em 0 #c0c0c0,
		0.7em 1.4em 0 #000000,
		0.1em 1.5em 0 #868686,
		0.2em 1.5em 0 #c0c0c0,
		0.3em 1.5em 0 #868686,
		0.4em 1.5em 0 #868686,
		0.5em 1.5em 0 #868686,
		0.6em 1.5em 0 #c0c0c0,
		0.7em 1.5em 0 #000000,
		0.1em 1.6em 0 #868686,
		0.2em 1.6em 0 #c0c0c0,
		0.3em 1.6em 0 #c0c0c0,
		0.4em 1.6em 0 #c0c0c0,
		0.5em 1.6em 0 #c0c0c0,
		0.6em 1.6em 0 #c0c0c0,
		0.7em 1.6em 0 #000000,
		0.2em 1.7em 0 #000000,
		0.3em 1.7em 0 #000000,
		0.4em 1.7em 0 #000000,
		0.5em 1.7em 0 #000000,
		0.6em 1.7em 0 #000000,
		0.4em 1.8em 0 #c0c0c0,
		0.4em 1.9em 0 #c0c0c0,
		0.4em 2.0em 0 #c0c0c0,
		0.4em 2.1em 0 #c0c0c0,
		0.4em 2.2em 0 #c0c0c0,
		0.4em 2.3em 0 #c0c0c0,
		0.4em 2.4em 0 #c0c0c0;
	top: 0.1em;
	left: 0.6em;
}
.zip > .zip {
	animation-name: pullLeft;
	margin: 0;
	top: 0;
	left: 0;
	transform: scale(0.5);
	z-index: 1;
}
.zip > .zip:after {
	animation: none;
}
/** Other Viewports **/
/* Tablet */
@media (min-width: 768px) {
	:root {
		font-size: 40px;
	}
}
/* Small Desktop */
@media (min-width: 1024px) {
	:root {
		font-size: 60px;
	}
}
/* Large Desktop */
@media (min-width: 1280px) {
	:root {
		font-size: 80px;
	}
}
/** Animations **/
@keyframes pullDown {
	from {
		clip-path: polygon(0 0,0.8em 0,0.8em 2.5em,0 2.5em);
		transform: translate(-0.1em,-0.1em);
	}
	12.5% {
		clip-path: polygon(0 0,0.8em 0,0.8em 1.8em,0 1.8em);
		transform: translate(-0.1em,0.6em);
	}
	25% {
		clip-path: polygon(0 0,0.8em 0,0.8em 1.8em,0 1.8em);
		transform: translate(-0.1em,1.3em);
	}
	37.5%, to {
		clip-path: polygon(0 0,0.8em 0,0.8em 1.8em,0 1.8em);
		transform: translate(-0.1em,2em);
	}
}
@keyframes pullLeft {
	from, 62.49% {
		clip-path: polygon(0 0,0.4em 0,0.4em 2.7em,0 2.7em);
		transform: translateX(0) scale(0.5);
		visibility: hidden;
	}
	62.5% {
		clip-path: polygon(0 0,0.4em 0,0.4em 2.7em,0 2.7em);
		transform: translateX(0) scale(0.5);
		visibility: visible;
	}
	75%, 87.5% {
		clip-path: polygon(0 0,3.6em 0,3.6em 2.7em,0 2.7em);
		transform: translateX(-1.6em) scale(0.5);
		visibility: visible;
	}
	to {
		clip-path: polygon(0 0,3.6em 0,3.6em 2.7em,0 2.7em);
		transform: translateX(-3.2em) scale(1);
		visibility: visible;
	}
}
@keyframes pullRight {
	from, 87.5% {
		transform: translateX(0);
	}
	to {
		transform: translateX(100%);
	}
}
              
            
!

JS

              
                
              
            
!
999px

Console