EffectHub.com: your best source for gaming

Recommendation

More Effects...

CSS

/* GENERAL ========================================= */

/* Zero default margin & padding around common elements */
article, blockquote, body, dd, dl, dt, fieldset, figure, form, h1, h2, h3, h4, h5, h6, header, li, menu, nav, ol, p, section, ul {
margin: 0;
border: 0 none #FFFFFF;
padding: 0;
}

html {
height: 100%;
}

body {
width: 100%;
height: 100%;
overflow: hidden;
background-color: #3f4652;
color: #3f4652;
line-height: 1.5;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 90%;
text-align: center;
}

a {
color: #0099cc;
text-decoration: underline;
}

a:visited {
color: #9966cc;
}

a:hover {
text-decoration: none;
}

img {
border: 0 none transparent;
}

input, select, table, textarea {
color: #3f4652;
font-size: 100%;
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

input[type=text] {
width: 12em;
height: 43px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
border: 0 none #ffffff;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 0 10px;
font-weight: bold;
}

input[type=text]:focus {
border: 3px solid #00c4cc;
padding: 0 7px;
}

/* CONTENT ========================================= */

h1 {
position: absolute;
z-index: 5002;
right: 20px;
bottom: 20px;
z-index: 10;
width: 75px;
height: 75px;
background-image: url(https://di8vc3anm8wl1.cloudfront.net/static/images/christmas/logo.png);
background-repeat: no-repeat;
background-size: contain;
text-indent: -9999px;
/* IE <= 8 doesn't do background-size: contain correctly */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://di8vc3anm8wl1.cloudfront.net/static/images/christmas/logo.png', sizingMethod='scale')";
}

.multipage h1 {
position: fixed;
}

@media only screen and (max-width: 580px) {
h1 {
left: 50%;
right: auto;
top: 20px;
margin-left: -36px;
}
}

h1 a {
display: block;
width: 75px;
height: 75px;
}

#bg {
position: fixed;
left: -5%;
top: -5%;
z-index: 1;
width: 110%;
height: 110%;
background-image: url(https://di8vc3anm8wl1.cloudfront.net/static/images/christmas/bg.jpg);
background-size: cover;
opacity: 0;
-webkit-transition: -webkit-filter 0.5s linear, filter 0.5s linear, opacity 0.1s linear;
-moz-transition: -moz-filter 0.5s linear, filter 0.5s linear, opacity 0.1s linear;
transition: -webkit-filter 0.5s linear, -moz-filter 0.5s linear, filter 0.5s linear, opacity 0.1s linear;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
transform: translateZ(0);
/* IE <= 8 doesn't do background-size: contain correctly */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://di8vc3anm8wl1.cloudfront.net/static/images/christmas/bg.jpg', sizingMethod='scale')";
}

.loaded #bg {
opacity: 1;
}

#bg.blur {
/* For browsers with blur */
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-ms-filter: blur(10px);
filter: blur(10px);
}

#threeD {
z-index: 5000;
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 50%;
-moz-perspective: 800px;
-moz-perspective-origin: 50% 50%;
perspective: 800px;
perspective-origin: 50% 50%;
}

.multipage #threeD {
-webkit-perspective: none;
-moz-perspective: none;
perspective: none;
}

.multipage #scroller {
position: fixed;
top:0;
left:0;
height: 100%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}

#envelope {
z-index: 5001;
position: absolute;
left: 50%;
top: 50%;
width: 1024px;
height: 726px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}

#envelope.appearing {
-webkit-animation: appearingEnvelope 1.5s forwards;
-moz-animation: appearingEnvelope 1.5s forwards;
animation: appearingEnvelope 1.5s forwards;
}

@-webkit-keyframes appearingEnvelope {
0% {
-webkit-transform: translateY(-40%);
-moz-transform: translateY(-40%);
transform: translateY(-40%);
opacity: 0;
}
20% {
-webkit-transform: translateY(10%);
-moz-transform: translateY(10%);
transform: translateY(10%);
opacity: 1;
}
40% {
-webkit-transform: translateY(-5%);
-moz-transform: translateY(-5%);
transform: translateY(-5%);
opacity: 1;
}
60% {
-webkit-transform: translateY(2.5%);
-moz-transform: translateY(2.5%);
transform: translateY(2.5%);
opacity: 1;
}
80% {
-webkit-transform: translateY(-1%);
-moz-transform: translateY(-1%);
transform: translateY(-1%);
opacity: 1;
}
100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}

@-moz-keyframes appearingEnvelope {
0% {
-webkit-transform: translateY(-40%);
-moz-transform: translateY(-40%);
transform: translateY(-40%);
opacity: 0;
}
20% {
-webkit-transform: translateY(10%);
-moz-transform: translateY(10%);
transform: translateY(10%);
opacity: 1;
}
40% {
-webkit-transform: translateY(-5%);
-moz-transform: translateY(-5%);
transform: translateY(-5%);
opacity: 1;
}
60% {
-webkit-transform: translateY(2.5%);
-moz-transform: translateY(2.5%);
transform: translateY(2.5%);
opacity: 1;
}
80% {
-webkit-transform: translateY(-1%);
-moz-transform: translateY(-1%);
transform: translateY(-1%);
opacity: 1;
}
100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}

@keyframes appearingEnvelope {
0% {
-webkit-transform: translateY(-40%);
-moz-transform: translateY(-40%);
transform: translateY(-40%);
opacity: 0;
}
20% {
-webkit-transform: translateY(10%);
-moz-transform: translateY(10%);
transform: translateY(10%);
opacity: 1;
}
40% {
-webkit-transform: translateY(-5%);
-moz-transform: translateY(-5%);
transform: translateY(-5%);
opacity: 1;
}
60% {
-webkit-transform: translateY(2.5%);
-moz-transform: translateY(2.5%);
transform: translateY(2.5%);
opacity: 1;
}
80% {
-webkit-transform: translateY(-1%);
-moz-transform: translateY(-1%);
transform: translateY(-1%);
opacity: 1;
}
100% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}

#envelope.flipping {
-webkit-animation: flippingEnvelope 2.5s forwards;
-moz-animation: flippingEnvelope 2.5s forwards;
animation: flippingEnvelope 2.5s forwards;
}

@-webkit-keyframes flippingEnvelope {
0% {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
transform: rotateY(0);
}
20% {
-webkit-transform: rotateY(-20deg);
-moz-transform: rotateY(-20deg);
transform: rotateY(-20deg);
}
50% {
-webkit-transform: rotateY(200deg);
-moz-transform: rotateY(200deg);
transform: rotateY(200deg);
}
65% {
-webkit-transform: rotateY(170deg);
-moz-transform: rotateY(170deg);
transform: rotateY(170deg);
}
80% {
-webkit-transform: rotateY(185deg);
-moz-transform: rotateY(185deg);
transform: rotateY(185deg);
}
100% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}

@-moz-keyframes flippingEnvelope {
0% {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
transform: rotateY(0);
}
20% {
-webkit-transform: rotateY(-20deg);
-moz-transform: rotateY(-20deg);
transform: rotateY(-20deg);
}
50% {
-webkit-transform: rotateY(200deg);
-moz-transform: rotateY(200deg);
transform: rotateY(200deg);
}
65% {
-webkit-transform: rotateY(170deg);
-moz-transform: rotateY(170deg);
transform: rotateY(170deg);
}
80% {
-webkit-transform: rotateY(185deg);
-moz-transform: rotateY(185deg);
transform: rotateY(185deg);
}
100% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}

@keyframes flippingEnvelope {
0% {
-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
transform: rotateY(0);
}
20% {
-webkit-transform: rotateY(-20deg);
-moz-transform: rotateY(-20deg);
transform: rotateY(-20deg);
}
50% {
-webkit-transform: rotateY(200deg);
-moz-transform: rotateY(200deg);
transform: rotateY(200deg);
}
65% {
-webkit-transform: rotateY(170deg);
-moz-transform: rotateY(170deg);
transform: rotateY(170deg);
}
80% {
-webkit-transform: rotateY(185deg);
-moz-transform: rotateY(185deg);
transform: rotateY(185deg);
}
100% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
}

#envelope.carding {
-webkit-animation: cardingEnvelope 1.5s forwards;
-moz-animation: cardingEnvelope 1.5s forwards;
animation: cardingEnvelope 1.5s forwards;
}

@-webkit-keyframes cardingEnvelope {
0% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(180deg) scale(1.4);
-moz-transform: rotateY(180deg) scale(1.4);
transform: rotateY(180deg) scale(1.4);
}
}

@-moz-keyframes cardingEnvelope {
0% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(180deg) scale(1.4);
-moz-transform: rotateY(180deg) scale(1.4);
transform: rotateY(180deg) scale(1.4);
}
}

@keyframes cardingEnvelope {
0% {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
100% {
-webkit-transform: rotateY(180deg) scale(1.4);
-moz-transform: rotateY(180deg) scale(1.4);
transform: rotateY(180deg) scale(1.4);
}
}

#envelopeFront {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
background-image: url(https://di8vc3anm8wl1.cloudfront.net/static/images/christmas/front.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
-webkit-box-shadow: 0 10px 15px rgba(0,0,0,0.333);
-moz-box-shadow: 0 10px 15px rgba(0,0,0,0.333);
box-shadow: 0 10px 15px rgba(0,0,0,0.333);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}

#envelope.finished #envelopeFront{
display: none;
}

#to {
position: absolute;
left: 0;
top: 50%;
z-index: 1;
width: 100%;
height: 100%;
margin-top: -0.6em;
font-size: 140%;
font-family: 'Dancing Script', Georgia, serif;
vertical-align: middle;
}

#to > span {
display: inline-block;
opacity: 0;
overflow: visible;
padding: 0 0.1em;
}

#envelope.appearing #to > span {
-webkit-animation: appearingTo 1.9s forwards;
-moz-animation: appearingTo 1.9s forwards;
animation: appearingTo 1.9s forwards;
}

#envelope.appearing #to > span:nth-child(2) {
-webkit-animation-delay: 0.15s;
-moz-animation-delay: 0.15s;
animation-delay: 0.15s;
}

#envelope.appearing #to > span:nth-child(3) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
animation-delay: 0.3s;
}

#envelope.appearing #to > span:nth-child(4) {
-webkit-animation-delay: 0.45s;
-moz-animation-delay: 0.45s;
animation-delay: 0.45s;
}

#envelope.appearing #to > span:nth-child(5) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}

#envelope.appearing #to > span:nth-child(6) {
-webkit-animation-delay: 0.75s;
-moz-animation-delay: 0.75s;
animation-delay: 0.75s;
}

@-webkit-keyframes appearingTo {
0% {
-webkit-transform: translateY(-150%);
-moz-transform: translateY(-150%);
transform: translateY(-150%);
opacity: 0;
}
20% {
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
transform: translateY(50%);
opacity: 1;
}
40% {
-webkit-transform: translateY(-20%);
-moz-transform: translateY(-20%);
transform: translateY(-20%);
}
55% {
-webkit-transform: translateY(10%);
-moz-transform: translateY(10%);
transform: translateY(10%);
}
75% {
-webkit-transform: translateY(-5%);
-moz-transform: translateY(-5%);
transform: translateY(-5%);
}
90% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 1;
}
}

@-moz-keyframes appearingTo {
0% {
-webkit-transform: translateY(-150%);
-moz-transform: translateY(-150%);
transform: translateY(-150%);
opacity: 0;
}
20% {
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
transform: translateY(50%);
opacity: 1;
}
40% {
-webkit-transform: translateY(-20%);
-moz-transform: translateY(-20%);
transform: translateY(-20%);
}
55% {
-webkit-transform: translateY(10%);
-moz-transform: translateY(10%);
transform: translateY(10%);
}
75% {
-webkit-transform: translateY(-5%);
-moz-transform: translateY(-5%);
transform: translateY(-5%);
}
90% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 1;
}
}

@keyframes appearingTo {
0% {
-webkit-transform: translateY(-150%);
-moz-transform: translateY(-150%);
transform: translateY(-150%);
opacity: 0;
}
20% {
-webkit-transform: translateY(50%);
-moz-transform: translateY(50%);
transform: translateY(50%);
opacity: 1;
}
40% {
-webkit-transform: translateY(-20%);
-moz-transform: translateY(-20%);
transform: translateY(-20%);
}
55% {
-webkit-transform: translateY(10%);
-moz-transform: translateY(10%);
transform: translateY(10%);
}
75% {
-webkit-transform: translateY(-5%);
-moz-transform: translateY(-5%);
transform: translateY(-5%);
}
90% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 1;
}
}

#envelopeBack {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transform: translateZ(-2px) rotateY(180deg);
-moz-transform: translateZ(-2px) rotateY(180deg);
transform: translateZ(-2px) rotateY(180deg);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}

#envelopeUnder {
position: absolute;
left: 0;
top: 0;
z-index: 0;
width: 100%;
height: 100%;
background-color: #ffffff;
background-image: url(https://d29498xbqfhwsb.cloudfront.net/static/images/christmas/back_under.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
-webkit-box-shadow: 0 10px 15px rgba(0,0,0,0.333);
-moz-box-shadow: 0 10px 15px rgba(0,0,0,0.333);
box-shadow: 0 10px 15px rgba(0,0,0,0.333);
}

#envelope.finished #envelopeUnder{
display: none;
}

.card {
top: 5%;
left: 5%;
position: absolute;
z-index: 1;
width: 90%;
}

.multipage .card {
transition: opacity 1s ease-out, -webkit-transform 1s ease-out, -moz-transform 1s ease-out, transform 1s ease-out;
left: 0;
width: 100%;
-webkit-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
opacity: 0.8;
display: none;
}

/* hide everything but the first card until finished */
.multipage .card.page1 {
display: block;
}

.multipage .finished .card {
display: block;
}

/* This provides breathing room at the bottom for the final card */
.multipage .card.fauxPage {
height: 100px;
visibility: hidden;
}

/* there is fixed page limit so this was simplest */
.multipage .card.page1 {
top: 0%;
}

.multipage .card.page2 {
top: 101%;
}

.multipage .card.page3 {
top: 202%;
}

.multipage .card.page4 {
top: 303%;
}

.multipage .card.page5 {
top: 404%;
}

.multipage .card.page6 {
top: 505%;
}

.multipage .card.page7 {
top: 606%;
}

.multipage .card.page8 {
top: 707%;
}

.multipage .card.page9 {
top: 808%;
}

.multipage .card.page10 {
top: 909%;
}

.multipage .card.page11 {
top: 1010%;
}

.multipage .card.page12 {
top: 1111%;
}

.multipage .card.page13 {
top: 1212%;
}

.multipage .card.page14 {
top: 1313%;
}

.multipage .card.page15 {
top: 1414%;
}

.multipage .card.page16 {
top: 1515%;
}

.page1 .page1, .page2 .page2, .page3 .page3, .page4 .page4,
.page5 .page5, .page6 .page6, .page7 .page7, .page8 .page8,
.page9 .page9, .page10, .page10, .page11 .page11, .page12 .page12,
.page13 .page13, .page14 .page14, .page15 .page15 {
opacity: 1;
}

.humbugged #bg {
background-image: url(https://di8vc3anm8wl1.cloudfront.net/static/images/christmas/bgblur.jpg);
-webkit-transition: opacity 0.1s linear;
-ms-transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
/* IE <= 8 doesn't do background-size: contain correctly */
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://di8vc3anm8wl1.cloudfront.net/static/images/christmas/bgblur.jpg', sizingMethod='scale')";
}

.humbugged #envelope .card {
opacity: 0;
-webkit-transition: opacity 0.1s linear;
-ms-transition: opacity 0.1s linear;
transition: opacity 0.1s linear;
-webkit-transform: scale(1.4);
transform: scale(1.4);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.4, M12=0, M21=0, M22=1.4, SizingMethod='auto expand')";
}

.humbugged.multipage #envelope .card {
-webkit-transform: scale(0.8);
transform: scale(0.8);
}

.humbugged.loaded #envelope .card {
opacity: 1;
}

.humbugged #envelope #envelopeBack {
-webkit-transform: none;
transform: none;
}

.humbugged #envelope #envelopeFront,
.humbugged #envelope #envelopeUnder,
.humbugged #envelope #envelopeBackMain,
.humbugged #envelope #envelopeFlap,
.humbugged #envelope #envelopeFlapShadow {
display: none;
}

#envelope.carding .card {
-webkit-box-shadow: 0 10px 15px rgba(0,0,0,0.333);
-moz-box-shadow: 0 10px 15px rgba(0,0,0,0.333);
box-shadow: 0 10px 15px rgba(0,0,0,0.333);
-webkit-transition: -webkit-box-shadow 1s ease-out, -webkit-transform 1s ease-out;
-moz-transition: -moz-box-shadow 1s ease-out, -moz-transform 1s ease-out;
transition: -webkit-box-shadow 1s ease-out, -moz-box-shadow 1s ease-out, box-shadow 1s ease-out, -webkit-transform 1s ease-out, -moz-transform 1s ease-out, transform 1s ease-out;
}

#envelope.finished .card {
-webkit-box-shadow: 0 10px 15px rgba(0,0,0,0.333);
-moz-box-shadow: 0 10px 15px rgba(0,0,0,0.333);
box-shadow: 0 10px 15px rgba(0,0,0,0.333);
}

#envelopeBackMain {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 100%;
height: 100%;
background-image: url(https://d29498xbqfhwsb.cloudfront.net/static/images/christmas/back.png);
background-size: 100% 100%;
background-repeat: no-repeat;
}

#envelope.finished #envelopeBackMain{
display: none;
}

#envelope.carding #envelopeBackMain,
#envelope.carding #envelopeUnder {
-webkit-animation: backDropping 1.5s ease-out forwards;
-moz-animation: backDropping 1.5s ease-out forwards;
animation: backDropping 1.5s ease-out forwards;
}

@-webkit-keyframes backDropping {
0% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(300%);
-moz-transform: translateY(300%);
transform: translateY(300%);
}
}

@-moz-keyframes backDropping {
0% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(300%);
-moz-transform: translateY(300%);
transform: translateY(300%);
}
}

@keyframes backDropping {
0% {
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(300%);
-moz-transform: translateY(300%);
transform: translateY(300%);
}
}

#envelopeFlap {
position: absolute;
left: 0;
top: 1px;
z-index: 4;
width: 100%;
height: 100%;
background-image: url(https://d29498xbqfhwsb.cloudfront.net/static/images/christmas/back_flap.png);
background-repeat: no-repeat;
background-size: contain;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
}

#envelope.finished #envelopeFlap{
display: none;
}

#envelope.opening #envelopeFlap {
-webkit-animation: openingFlap 1.5s forwards;
-moz-animation: openingFlap 1.5s forwards;
animation: openingFlap 1.5s forwards;
}

@-webkit-keyframes openingFlap {
0% {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
transform: rotateX(0);
}
100% {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
}

@-moz-keyframes openingFlap {
0% {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
transform: rotateX(0);
}
100% {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
}

@keyframes openingFlap {
0% {
-webkit-transform: rotateX(0);
-moz-transform: rotateX(0);
transform: rotateX(0);
}
100% {
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
transform: rotateX(180deg);
}
}

#envelope.carding #envelopeFlap {
z-index: 0;
-webkit-animation: flapDropping 1.5s ease-out forwards;
-moz-animation: flapDropping 1.5s ease-out forwards;
animation: flapDropping 1.5s ease-out forwards;
}

@-webkit-keyframes flapDropping {
0% {
-webkit-transform: translateY(0) rotateX(180deg);
-moz-transform: translateY(0) rotateX(180deg);
transform: translateY(0) rotateX(180deg);
}
100% {
-webkit-transform: translateY(300%) rotateX(180deg);
-moz-transform: translateY(300%) rotateX(180deg);
transform: translateY(300%) rotateX(180deg);
}
}

@-moz-keyframes flapDropping {
0% {
-webkit-transform: translateY(0) rotateX(180deg);
-moz-transform: translateY(0) rotateX(180deg);
transform: translateY(0) rotateX(180deg);
}
100% {
-webkit-transform: translateY(300%) rotateX(180deg);
-moz-transform: translateY(300%) rotateX(180deg);
transform: translateY(300%) rotateX(180deg);
}
}

@keyframes flapDropping {
0% {
-webkit-transform: translateY(0) rotateX(180deg);
-moz-transform: translateY(0) rotateX(180deg);
transform: translateY(0) rotateX(180deg);
}
100% {
-webkit-transform: translateY(300%) rotateX(180deg);
-moz-transform: translateY(300%) rotateX(180deg);
transform: translateY(300%) rotateX(180deg);
}
}

#envelopeFlapShadow {
position: absolute;
left: 0;
top: 0;
z-index: 3;
width: 100%;
height: 100%;
background-image: url(https://d29498xbqfhwsb.cloudfront.net/static/images/christmas/back_flap_shadow.png);
background-repeat: no-repeat;
background-size: contain;
opacity: 0.15;
-webkit-transform-origin: 50% 0;
-webkit-transform: scaleY(1.02);
-moz-transform-origin: 50% 0;
-moz-transform: scaleY(1.02);
transform-origin: 50% 0;
transform: scaleY(1.02);
}

#envelope.finished #envelopeFlapShadow{
display: none;
}

#envelope.opening #envelopeFlapShadow {
-webkit-animation: openingFlapShadow 1.3s forwards;
-moz-animation: openingFlapShadow 1.3s forwards;
animation: openingFlapShadow 1.3s forwards;
}

@-webkit-keyframes openingFlapShadow {
0% {
opacity: 0.15;
-webkit-transform: rotateX(0) skewX(0) scaleY(1.02);
-moz-transform: rotateX(0) skewX(0) scaleY(1.02);
transform: rotateX(0) skewX(0) scaleY(1.02);
}
100% {
opacity: 0;
-webkit-transform: rotateX(90deg) skewX(50deg) scaleY(1.02);
-moz-transform: rotateX(90deg) skewX(50deg) scaleY(1.02);
transform: rotateX(90deg) skewX(50deg) scaleY(1.02);
}
}

@-moz-keyframes openingFlapShadow {
0% {
opacity: 0.15;
-webkit-transform: rotateX(0) skewX(0) scaleY(1.02);
-moz-transform: rotateX(0) skewX(0) scaleY(1.02);
transform: rotateX(0) skewX(0) scaleY(1.02);
}
100% {
opacity: 0;
-webkit-transform: rotateX(90deg) skewX(50deg) scaleY(1.02);
-moz-transform: rotateX(90deg) skewX(50deg) scaleY(1.02);
transform: rotateX(90deg) skewX(50deg) scaleY(1.02);
}
}

@keyframes openingFlapShadow {
0% {
opacity: 0.15;
-webkit-transform: rotateX(0) skewX(0) scaleY(1.02);
-moz-transform: rotateX(0) skewX(0) scaleY(1.02);
transform: rotateX(0) skewX(0) scaleY(1.02);
}
100% {
opacity: 0;
-webkit-transform: rotateX(90deg) skewX(50deg) scaleY(1.02);
-moz-transform: rotateX(90deg) skewX(50deg) scaleY(1.02);
transform: rotateX(90deg) skewX(50deg) scaleY(1.02);
}
}

#buttons {
position: absolute;
width: 100%;
height: 50px;
bottom: 32px;
z-index: 11;
text-align: center;
}

#buttons .social {
display: inline;
}

#buttons .condensed {
display: none;
}

@media only screen and (max-width: 639px) {
#buttons .social .button {
width: 3.4em;
white-space: nowrap;
color: transparent;
text-shadow: none;
}

#buttons #facebook img {
left: 3px;
}

#buttons .full {
display: none;
}

#buttons .condensed {
display: inline;
}
}

@media only screen and (min-aspect-ratio: 4/3) and (max-height: 640px) {
#buttons, h1 {
display: none;
}
}

#buttons .button {
display: inline-block;
height: 50px;
padding: 0 2em;
margin-right: 0.5em;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: none;
border: 0 none transparent;
border-radius: 5px;
background-color: #99C432;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.1)));
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.1));
background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1));
color: #ffffff;
font-size: 100%;
font-family: 'Lucida Grande', Verdana, sans-serif;
font-weight: bold;
text-shadow: -1px -1px 0 rgba(0,0,0,0.25);
line-height: 50px;
text-decoration: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
box-shadow: inset 0 -3px 0 rgba(0,0,0,0.25);
-webkit-transition: background-color 0.15s linear;
-moz-transition: background-color 0.15s linear;
transition: background-color 0.15s linear;
}

#buttons .button:hover {
background-color: #a5d13f;
}

#buttons .social .button {
padding: 0 1em;
background-color: #00c4cc;
}

.social .button img {
position: relative;
top: 2px;
margin-right: 0.5em;
}

.social #facebook img {
top: 4px;
}

#buttons #facebook:hover {
background-color: #3b5998;
}

#buttons #twitter:hover {
background-color: #00abf0;
}

#buttons .button:active {
/* Can't change position of button because Chrome sometimes doesn't catch clicks */
line-height: 51px;
box-shadow: none;
-webkit-transition: none;
-moz-transition: none;
transition: none;
}

#buttons .button.appearing {
-webkit-animation: appearingDesign 1s forwards;
-moz-animation: appearingDesign 1s forwards;
animation: appearingDesign 1s forwards;
}

@-webkit-keyframes appearingDesign {
0% {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
}
20% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
opacity: 1;
}
40% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
transform: scale(0.9);
}
60% {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}
80% {
-webkit-transform: scale(0.98);
-moz-transform: scale(0.98);
transform: scale(0.98);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}

@-moz-keyframes appearingDesign {
0% {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
}
20% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
opacity: 1;
}
40% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
transform: scale(0.9);
}
60% {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}
80% {
-webkit-transform: scale(0.98);
-moz-transform: scale(0.98);
transform: scale(0.98);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}

@keyframes appearingDesign {
0% {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
}
20% {
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
opacity: 1;
}
40% {
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
transform: scale(0.9);
}
60% {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
transform: scale(1.05);
}
80% {
-webkit-transform: scale(0.98);
-moz-transform: scale(0.98);
transform: scale(0.98);
}
100% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
opacity: 1;
}
}

HTML

Recommendation

Join Effecthub.com