.giftbox {
  padding: 30px;
  background-color: #fff;
  color: #fff;
  /*box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, .3);*/
  text-transform: uppercase;
  position: relative;
  font-weight: bold;
  cursor: pointer;
}

.bounce {	
	-webkit-animation: bounce 1.2s ease-out;
	-moz-animation: bounce 800ms ease-out;
	-o-animation: bounce 800ms ease-out;
	animation: bounce 1.2s ease-out;  
}

/* Webkit, Chrome and Safari */

@-webkit-keyframes bounce {
	0% {
		-webkit-transform:translateY(-100%);
	}
	5% {
		-webkit-transform:translateY(-100%);
	}
	15% {
		-webkit-transform:translateY(0);
		padding: 4px auto;
	}
	20% {
		-webkit-transform:translateY(-80%);
	}
	25% {
		-webkit-transform:translateY(0%);
		padding: 4px auto;
	}
	30% {
		-webkit-transform:translateY(-70%);
	}
	35% {
		-webkit-transform:translateY(0%);
		padding: 5px auto;
	}
	40% {
		-webkit-transform:translateY(-60%);
	}
	45% {
		-webkit-transform:translateY(0%);
		padding: 5px auto;
	}
	50% {
		-webkit-transform:translateY(-50%);
	}
	55% {
		-webkit-transform:translateY(0%);
		padding: 6px auto;
	}
	60% {
		-webkit-transform:translateY(-30%);
	}
	65% {
		-webkit-transform:translateY(0%);
		padding: 6px auto;
	}
	70% {
		-webkit-transform:translateY(-15%);
	}
	75% {
		-webkit-transform:translateY(0);
		padding: 8px auto;
	}
	80% {
		-webkit-transform:translateY(-10%);
	}
	85% {
		-webkit-transform:translateY(0);
		padding: 8px auto;
	}
	90% {
		-webkit-transform:translateY(-5%);
	}
	95% {
		-webkit-transform:translateY(0);
		padding: 10px;
	}
	100% {
		-webkit-transform:translateY(0);
		padding: 10px;
	}
}

/* Mozilla Firefox 15 below */
@-moz-keyframes bounce {
  0% {
	-moz-transform:translateY(-100%);
    opacity: 0;
  }
  5% {
  	-moz-transform:translateY(-100%);
    opacity: 0;
  }
  15% {
  	-moz-transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
  	-moz-transform:translateY(-50%);
  }
  40% {
  	-moz-transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
  	-moz-transform:translateY(-30%);
  }
  70% {
  	-moz-transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
  	-moz-transform:translateY(-15%);
  }
  90% {
  	-moz-transform:translateY(0%);
  	padding-bottom: 8px;
  }
  95% {
  	-moz-transform:translateY(-10%);
  }
  97% {
  	-moz-transform:translateY(0%);
  	padding-bottom: 9px;
  }
  99% {
  	-moz-transform:translateY(-5%);
  }
  100% {
  	-moz-transform:translateY(0);
  	padding-bottom: 9px;
    opacity: 1;
  }
}

/* Opera 12.0 */
@-o-keyframes bounce {
  0% {
	-o-transform:translateY(-100%);
    opacity: 0;
  }
  5% {
  	-o-transform:translateY(-100%);
    opacity: 0;
  }
  15% {
  	-o-transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
  	-o-transform:translateY(-50%);
  }
  40% {
  	-o-transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
  	-o-transform:translateY(-30%);
  }
  70% {
  	-o-transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
  	-o-transform:translateY(-15%);
  }
  90% {
  	-o-transform:translateY(0%);
  	padding-bottom: 8px;
  }
  95% {
  	-o-transform:translateY(-10%);
  }
  97% {
  	-o-transform:translateY(0%);
  	padding-bottom: 9px;
  }
  99% {
  	-o-transform:translateY(-5%);
  }
  100% {
  	-o-transform:translateY(0);
  	padding-bottom: 9px;
    opacity: 1;
  }
}

/* W3, Opera 12+, Firefox 16+ */
@keyframes bounce {
  0% {
	transform:translateY(-100%);
    opacity: 0;
  }
  5% {
  	transform:translateY(-100%);
    opacity: 0;
  }
  15% {
  	transform:translateY(0);
    padding-bottom: 5px;
  }
  30% {
  	transform:translateY(-50%);
  }
  40% {
  	transform:translateY(0%);
    padding-bottom: 6px;
  }
  50% {
  	transform:translateY(-30%);
  }
  70% {
  	transform:translateY(0%);
    padding-bottom: 7px;
  }
  80% {
  	transform:translateY(-15%);
  }
  90% {
  	transform:translateY(0%);
  	padding-bottom: 8px;
  }
  95% {
  	transform:translateY(-7%);
  }
  97% {
  	transform:translateY(0%);
  	padding-bottom: 9px;
  }
  99% {
  	transform:translateY(-3%);
  }
  100% {
  	transform:translateY(0);
  	padding-bottom: 9px;
    opacity: 1;
  }
}


@keyframes hoverbounce {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    -ms-transform:     translateY(0);
    transform:         translateY(0)
  }
  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform:     translateY(-30px);
    transform:         translateY(-30px)
  }
  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform:     translateY(-15px);
    transform:         translateY(-15px)
  }
}
.hoverbounce {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;  
}
.hoverbounce:hover {
  cursor: pointer;
  animation-name: hoverbounce;
  -moz-animation-name: hoverbounce;
}