/*
	General styling. Ignore this.
*/
body{
	font-family:Ubuntu, sans-serif;
	padding:20px;
}

*{box-sizing:border-box}

/*
	DISCLAIMER:
		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
		warned.
	
	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. ;-)
*/
div{
	background-color:transparent;
	border:0 solid #000;
	border-left-width:0;
	border-radius:2px;
	border-right-width:0;
	cursor:pointer;
	display:block;
	margin:0 auto;
	max-height:200px;
	padding-bottom:20px;
	padding-top:20px;
	text-align:center;
	transform:rotate(0);
	transition:
	/*	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.
*/
div:hover{
	background-color:#ccc;
	border-left-width:20px;
	border-right-width:20px;
	padding-bottom:100px;
	padding-top:100px;
	text-align:center;
	transform:rotate(360deg);
	transition:
	/*	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

	****************************************************************************************************
	01------------------02--------------------------------------03------------------04------------------
	0.0s                0.5s                1.0s                1.5s                2.0s                
	****************************************************************************************************
	
	01	border-left
		border-right
	----------------------------------------------------------------------------------------------------
	02	transform
	----------------------------------------------------------------------------------------------------
	03	padding-bottom
		padding-top
	----------------------------------------------------------------------------------------------------
	04	background-color
	----------------------------------------------------------------------------------------------------
*/