CodePen Embed - Holiday Greeting

<div id="box1" class="shake bounce box1closed">
    <img id="box-top1" src="http://ericanton.co/archive/patterson/present/img/box-top.png">
		</div><!-- end #box1 -->
			
		<div id="box2" class="box2closed hideBox">
			<img id="box-top2" src="http://ericanton.co/archive/patterson/present/img/box-top2.png">
		</div><!-- end #box2 -->
				
		<div id="box3" class="box3closed hideBox">
			<img id="box-top3" src="http://ericanton.co/archive/patterson/present/img/box-top3.png">
			
			<div id="greeting" class="greetingClosed">
        <h1>Happy Holidays!</h1>
			</div><!-- end #greeting -->
		</div><!-- end #box3 -->
		
		<img id="box-bottom3" class="hideBox" src="http://ericanton.co/archive/patterson/present/img/box-bottom3.png">
		
		<img id="box-bottom2" class="hideBox" src="http://ericanton.co/archive/patterson/present/img/box-bottom2.png">
		
		<img id="box-bottom1" src="http://ericanton.co/archive/patterson/present/img/box-bottom.png">

@font-face {
    font-family: 'clarendontligregular';
    src: url('http://ericanton.co/fonts/clarendon/clarendontlig-webfont.eot');
    src: url('http://ericanton.co/fonts/clarendon/clarendontlig-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://ericanton.co/fonts/clarendon/clarendontlig-webfont.woff') format('woff'),
         url('http://ericanton.co/fonts/clarendon/clarendontlig-webfont.ttf') format('truetype'),
         url('http://ericanton.co/fonts/clarendon/clarendontlig-webfont.svg#clarendontligregular') format('svg');
    font-weight: normal;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
}

body{
	background-image: url('http://ericanton.co/archive/patterson/present/img/bg_pattern.jpg');
	background-repeat: repeat;
	background-color: #03512a;
	margin: 50px;
	padding: 0;
font-family: 'clarendontligregular', Georgia, Serif;
font-size: large;
text-align:center;
}

#box1{
	position: relative;
	width: 375px;
	cursor: pointer; 
	margin: auto;
	transition: all 1s;
	-webkit-transition: all 1s;
}

.box1closed{
	height:120px;
}

.box1open{
	height:125px;
}

#box-top1{
	width: 375px;
	height: 150px;
	position: absolute;
	top:0;
	left:0;
}

#box-bottom1{
	width: 375px;
	height: 150px;
	margin: -40px auto 0 auto;
	position: relative;
	z-index: -2;
	display: block;
}

#box2{
	position: relative;
	width: 375px;
	top:50px;
	cursor: pointer; 
	margin:auto;
	transition: all 1s;
	-webkit-transition: all 1s;
}

.box2closed{
	height: 125px;
}

.box2open{
	height: 130px;
}

#box-top2{
	width: 375px;
	height: 100px;
}

#box-bottom2{
	width: 375px;
	height: 100px;
	margin: -25px auto 0 auto;
	position: relative;
	z-index: -1;
	display: block;
}

#box3{
	position: relative;
	width: 375px;
	top:50px;
	cursor: pointer; 
	margin: auto;
	transition: all 1s;
	-webkit-transition: all 1s;
	z-index: 2;
}

.box3closed{
	height: 90px;
}

.box3open{
	height: 200px;
}

#box-top3{
	width: 375px;
	height: 70px;
	position: absolute;
	top:0;
	left:0;
}

#box-bottom3{
	width: 375px;
	height: 70px;
	margin: auto;
	position: relative;
	z-index: 1;
	display: block;
}

.hideBox{
	display: none !important;
}

#greeting{
	color:#fff;
	overflow: hidden;
	margin:auto;
	padding-top:50px;
	transition: all 1s;
	-webkit-transition: all 0.5s;
text-shadow: 0px 0px 5px #03512a;
}

.greetingOpen{
	height: 100px;
}

.greetingClosed{
	height: 0px;
}

.bounce:hover{
	animation: bounce 1s infinite;
	-webkit-animation: bounce 1s infinite;
    -moz-animation: bounce 1s infinite;
    -ms-animation: bounce 1s infinite;
    -o-animation: bounce 1s infinite;
}

.shake{
	animation: shake 3s infinite;
	-webkit-animation: shake 3s infinite;
    -moz-animation: shake 3s infinite;
    -ms-animation: shake 3s infinite;
    -o-animation: shake 3s infinite;
}

@keyframes shake {
	0% { transform: rotate(0deg); }
	12% { transform: rotate(-10deg); }
	25% { transform: rotate(10deg); }
	37% { transform: rotate(0deg); }
	100% { transform: rotate(0deg); }
}

@-webkit-keyframes shake {
	0% { -webkit-transform: rotate(0deg); }
	12% { -webkit-transform: rotate(-10deg); }
	25% { -webkit-transform: rotate(10deg); }
	37% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(0deg); }
}

@-moz-keyframes shake {
	0% { -moz-transform: rotate(0deg); }
	12% { -moz-transform: rotate(-10deg); }
	25% { -moz-transform: rotate(10deg); }
	37% { -moz-transform: rotate(0deg); }
	100% { -moz-transform: rotate(0deg); }
}

@-ms-keyframes shake {
	0% { -ms-transform: rotate(0deg); }
	12% { -ms-transform: rotate(0deg); }
	25% { -ms-transform: rotate(10deg); }
	37% { -ms-transform: rotate(0deg); }
	100% { -ms-transform: rotate(0deg); }
}

@-o-keyframes shake {
	0% { -o-transform: rotate(0deg); }
	12% { -o-transform: rotate(0deg); }
	25% { -o-transform: rotate(10deg); }
	37% { -o-transform: rotate(0deg); }
	100% { -o-transform: rotate(0deg); }
}

@keyframes bounce {
	0% { top:-5px; }
	12% { top:5px; }
	25% { top:-5px; }
	37% { top:5px; }
	50% { top:-5px; }
	62% { top:5px; }
	75% { top:-5px; }
	87% { top:5px; }
	100% { top:-5px; }
}

@-webkit-keyframes bounce {
	0% { top:-5px; }
	12% { top:5px; }
	25% { top:-5px; }
	37% { top:5px; }
	50% { top:-5px; }
	62% { top:5px; }
	75% { top:-5px; }
	87% { top:5px; }
	100% { top:-5px; }
}

@-moz-keyframes bounce {
	0% { top:-5px; }
	12% { top:5px; }
	25% { top:-5px; }
	37% { top:5px; }
	50% { top:-5px; }
	62% { top:5px; }
	75% { top:-5px; }
	87% { top:5px; }
	100% { top:-5px; }
}

@-ms-keyframes bounce {
	0% { top:-5px; }
	12% { top:5px; }
	25% { top:-5px; }
	37% { top:5px; }
	50% { top:-5px; }
	62% { top:5px; }
	75% { top:-5px; }
	87% { top:5px; }
	100% { top:-5px; }
}

@-o-keyframes bounce {
	0% { top:-5px; }
	12% { top:5px; }
	25% { top:-5px; }
	37% { top:5px; }
	50% { top:-5px; }
	62% { top:5px; }
	75% { top:-5px; }
	87% { top:5px; }
	100% { top:-5px; }
}

<!-- open/close box1 -->
$("#box1").click(function(){
	if ($("#box1").hasClass("box1closed")){
		$("#box1").removeClass("box1closed shake bounce").addClass("box1open");
		$("#box2").removeClass("hideBox");
		$("#box-top2").addClass("shake bounce");
		$("#box-bottom2").removeClass("hideBox");
	}
	else {
		$("#box1").removeClass("box1open").addClass("box1closed shake bounce");
		$("#box2").removeClass("box2open").addClass("box2closed hideBox");
		$("#box3").removeClass("box3open").addClass("box3closed hideBox");
		$("#box-top2").removeClass("shake bounce");
		$("#box-bottom2").addClass("hideBox");
		$("#box-bottom3").addClass("hideBox");
		$("#greeting").removeClass("greetingOpen").addClass("greetingClosed");
		$("body").css({background:'url(http://ericanton.co/archive/patterson/present/img/bg_pattern.jpg)'});
	}
});


<!-- open/close box2 -->
$("#box2").click(function(){
	if ($("#box2").hasClass("box2closed")){
		$("#box2").removeClass("box2closed").addClass("box2open");
		$("#box3").removeClass("hideBox");
		$("#box-top2").removeClass("shake bounce");
		$("#box-top3").addClass("shake bounce");
		$("#box-bottom3").removeClass("hideBox");
	}
	else {
		$("#box2").removeClass("box2open").addClass("box2closed");
		$("#box3").removeClass("box3open").addClass("box3closed hideBox");
		$("#box-top2").addClass("shake bounce");
		$("#box-bottom3").addClass("hideBox");
		$("#greeting").removeClass("greetingOpen").addClass("greetingClosed");
		$("body").css({background:'url(http://ericanton.co/archive/patterson/present/img/bg_pattern.jpg)'});
	}
});


<!-- open/close box3 -->
$("#box3").click(function(){
	if ($("#box3").hasClass("box3closed")){
		$("#box3").removeClass("box3closed").addClass("box3open");
		$("#box-top3").removeClass("shake bounce");
		$("#greeting").removeClass("greetingClosed").addClass("greetingOpen");
		$("body").css({background:'url(http://ericanton.co/archive/patterson/present/img/bg_pattern.gif)'});
	}
	else {
		$("#box3").removeClass("box3open").addClass("box3closed");
		$("#greeting").removeClass("greetingOpen").addClass("greetingClosed");
		$("body").css({background:'url(http://ericanton.co/archive/patterson/present/img/bg_pattern.jpg)'});
	}
});

This Pen is owned by ericanton on CodePen.

See more by @EricAnton on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js