main.css

*{
	box-sizing: border-box;
}
#greeting {
	width: 400px;
    height: 400px;
    background: #FFDA00;
    border: 8px solid #F77A52;
    color: #F77A52;
    font-family: 'Shrikhand', cursive;
    font-size: 70px;
    padding: 40px;
    text-align: left;
    transition: all 2s ease
}
#greeting.alt {
	width: 600px;
	height: 600px;
	background: #CAFCD8;
	border: 20px solid #04BFBF;
	color: #04BFBF;
	font-family: 'Shadows Into Light', cursive;
	font-size: 130px;
	line-height: 1;
	padding: 200px 60px 60px 60px;
	text-align: right;
}

@keyframes bounce {
		0% {
			position: relative;
			top: 0px;
		}
		50% {
			position: relative;
			top: -60px;
		}
		100% {
			position: initial;
			top: 0px;
		}
	}
#greeting.animated {
    animation-name: bounce;
    animation-duration: .5s; /* or: Xms */
    animation-iteration-count: 4;
    animation-direction: normal; /* or: alternate, reverse */
    animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */
    animation-fill-mode: forwards; /* or: backwards, both, none */
    animation-delay: 0s; /* or: Xms */
}