css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              <div>Hover me to see the magic happen</div>

	General styling. Ignore this.
	font-family:Ubuntu, sans-serif;


		I'm chaining a hefty chunk of properties, so I
		decided to format them for readability. I haven't tested
		this in anything other than Chrome so other browsers may
		have trouble parsing the property this way. You have been
	This is the initial state of our element. Compare all
	of the properties here with the properties on the :hover
	state but skip the transition property for now. Read the
	comment above the :hover state, then come back here.
	* Did you read the comment over the :hover state? I'll bet
	* you're lying. Oh well, you're the one that will fail
	* miserably and ultimately throw yourself into a volcano
	* because you can't stand to face your own shame.
	* Carry on:

	The only major difference between the :hover state and the
	initial state in a transition chain is that you'll reverse
	the delays. Unfortunately, it's not as simple as flipping the
	delay column. Start from the bottom and add up the delays the
	same way you did with the :hover state. You'll likely have
	different numbers. This is normal.
	Now check out the transition chain documentation template at
	the bottom for your freebie. ;-)
	border:0 solid #000;
	margin:0 auto;
	/*	property			duration	delay */
		border-left			1.0s		2.0s,
		border-right		1.0s		2.0s,
		-webkit-transform	0.5s		1.5s,
		padding-bottom		1.0s		0.5s,
		padding-top			1.0s		0.5s,
		background-color	0.5s		0.0s;

	When chaining a bunch of transitions, I always start with
	the secondary state (:hover, :focus, :active, etc) since
	the transition property here actually controls the first
	half of our full transition.
	Wait, what? Shouldn't it control the second half? Let me
	explain. The transition property on a selector sets the
	INCOMING animation for that selector. For example, setting
	a delay on the :hover state means that the delay will happen
	when you move your cursor OVER the element. Setting the delay
	on the initial state will cause the delay to occur when you
	move your cursor AWAY from the element.
	Now that's out of the way, let's look at the transition
	property. I always sort my transition properties in the
	order that they'll be activated. Transitions that will be
	activated simultaneously are sorted alphabetically, making
	it a lot easier to read.
	Once I've typed in my properties, I'll start setting the
	duration and the delay for each of them. Make sure you
	always set delay values on chained properties, even if the
	delay is zero. Otherwise the browser may have trouble parsing
	the transition between the delay and non-delay versions.
	The easiest way to chain transitions is to have them happen
	in immediate sequence, or one right after the other. To do
	this, set each delay to the sum of the previous property's
	duration and delay. Here's the maths:
	* Previous Property: padding-bottom/-top
	duration + delay = newDelay
	1.0s     + 1.5s  = 2.5s
	You can get a lot fancier, adding transitions in the middle
	of each other or overlapping transitions but that's all
	beyond the scope of this pen.
	Something else to take notice of is that I'm using
	border-left/-right and padding-bottom/-top. This is because if
	I want to, I can now transition the vertical/horizontal
	versions of these properties individually. Also, some shorthand
	properties will give you grief with transitions, like background.
	You'll want to use the longhand properties if you plan on
	transitioning these.
	One final thing to note is that when chaining transitions,
	prefixed properties can break your entire chain. This chain uses
	-webkit-transform because I do most of my work in Chrome.
	However, if I change the prefix to -moz- and open it in Chrome,
	it will break the ENTIRE TRANSITION. I'm sure this is a bug but
	I'll be investigating a bit further and filing a bug report later
	if necessary.
	* NOW you should go back to the first comment.
	/*	property			duration	delay */
		border-left			1.0s		0.0s,
		border-right		1.0s		0.0s,
		-webkit-transform	0.5s		1.0s,
		padding-bottom		1.0s		1.5s,
		padding-top			1.0s		1.5s,
		background-color	0.5s		2.5s;

	This is just a little transition chain documentation I came up
	with to help keep track of your properties. Set the number on
	the timeline, then list the properties to which it corresponds
	in the list below.

/*	Timeline

	0.0s                0.5s                1.0s                1.5s                2.0s                
	01	border-left
	02	transform
	03	padding-bottom
	04	background-color
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................