/****************** CSS3 ANIMATIONS CLASSES *****************************/ /* ============================================== alreadyRotate ============================================== */ .alreadyRotate { width:auto; height:auto; padding: 0.22em 0.1em 0.8em 0.1em; border-radius: 0.15em; -moz-border-radius: 0.15em; -webkit-border-radius: 0.15em; -ms-border-radius: 0.15em; -o-border-radius: 0.15em; -webkit-animation-name: alreadyRotate; animation-name: alreadyRotate; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes alreadyRotate { 0% { opacity: 1; -webkit-transform:rotate(-10deg); transform:rotate(-10deg); } 100% { opacity: 1; -webkit-transform:rotate(-10deg); transform:rotate(-10deg); } } @keyframes alreadyRotate { 0% { opacity: 1; -webkit-transform:rotate(-10deg); transform:rotate(-10deg); } 100% { opacity: 1; -webkit-transform:rotate(-10deg); transform:rotate(-10deg); } } /* ============================================== alreadyRotate_90 ============================================== */ .alreadyRotate_90 { width:auto; height:auto; -webkit-animation-name: alreadyRotate_90; animation-name: alreadyRotate_90; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes alreadyRotate_90 { 0% { opacity: 1; -webkit-transform:rotate(-90deg); transform:rotate(-90deg); } 100% { opacity: 1; -webkit-transform:rotate(-90deg); transform:rotate(-90deg); } } @keyframes alreadyRotate_90 { 0% { opacity: 1; -webkit-transform:rotate(-90deg); transform:rotate(-90deg); } 100% { opacity: 1; -webkit-transform:rotate(-90deg); transform:rotate(-90deg); } } /* originally authored By Yoann HELIN */ /* ============================ awesome ============================ */ .awesome { float:left; overflow:hidden; height:1.1em; } .awesome ul { margin-top:0; padding:0px !important; text-align:left; list-style:none; animation:8s linear 0s normal none infinite change; -webkit-animation:8s linear 0s normal none infinite change; -moz-animation:8s linear 0s normal none infinite change; -o-animation:8s linear 0s normal none infinite change; -ms-animation:8s linear 0s normal none infinite change; color:#FFF000 !important; } .awesome ul li { line-height:1em; padding:0px !important; margin:0; } @-webkit-keyframes opacity { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} } @keyframes opacity { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} } @-ms-keyframes opacity { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} } @-webkit-keyframes change { 0% {-webkit-transform: translateY(0px);} 8% {-webkit-transform: translateY(0%);} 16% {-webkit-transform: translateY(-25%);} 24% {-webkit-transform: translateY(-25%);} 32% {-webkit-transform: translateY(-50%);} 40% {-webkit-transform: translateY(-50%);} 48% {-webkit-transform: translateY(-75%);} 56% {-webkit-transform: translateY(-75%);} 64% {-webkit-transform: translateY(-50%);} 72% {-webkit-transform: translateY(-50%);} 80% {-webkit-transform: translateY(-25%);} 88% {-webkit-transform: translateY(-25%);} 100% {-webkit-transform: translateY(0px);} } @keyframes change { 0% {transform: translateY(0px);} 8% {transform: translateY(0%);} 16% {transform: translateY(-25%);} 24% {transform: translateY(-25%);} 32% {transform: translateY(-50%);} 40% {transform: translateY(-50%);} 48% {transform: translateY(-75%);} 56% {transform: translateY(-75%);} 64% {transform: translateY(-50%);} 72% {transform: translateY(-50%);} 80% {transform: translateY(-25%);} 88% {transform: translateY(-25%);} 100% {transform: translateY(0px);} } @-ms-keyframes change { 0% {-ms-transform: translateY(0px);} 8% {-ms-transform: translateY(-0.001%);} 16% {-ms-transform: translateY(-25%);} 24% {-ms-transform: translateY(-25%);} 32% {-ms-transform: translateY(-50%);} 40% {-ms-transform: translateY(-50%);} 48% {-ms-transform: translateY(-75%);} 56% {-ms-transform: translateY(-75%);} 64% {-ms-transform: translateY(-50%);} 72% {-ms-transform: translateY(-50%);} 80% {-ms-transform: translateY(-25%);} 88% {-ms-transform: translateY(-25%);} 99% {-ms-transform: translateY(-0.001%);} 100% {-ms-transform: translateY(0px);} } /* ============================================================= bigEntrance Made by Justin Aguilar CSS3 ANIMATION CHEAT SHEET ============================================================= */ .bigEntrance{ animation-name: bigEntrance; -webkit-animation-name: bigEntrance; -ms-animation-name: bigEntrance; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; -ms-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; -ms-animation-timing-function: ease-out; visibility: visible !important; } @keyframes bigEntrance { 0% { transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } @-webkit-keyframes bigEntrance { 0% { -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%); opacity: 0.2; } 30% { -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%); opacity: 1; } 45% { -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 60% { -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%); opacity: 1; } 75% { -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%); opacity: 1; } 90% { -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } 100% { -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%); opacity: 1; } } @-ms-keyframes bigEntrance { 0% { -ms-transform: scale(0.3) rotate(6deg) translateX(-30rem) translateY(30rem); opacity: 0.2; } 30% { -ms-transform: scale(1.03) rotate(-2deg) translateX(2rem) translateY(-2rem); opacity: 1; } 45% { -ms-transform: scale(0.98) rotate(1deg) translateX(0rem) translateY(0rem); opacity: 1; } 60% { -ms-transform: scale(1.01) rotate(-1deg) translateX(0rem) translateY(0rem); opacity: 1; } 75% { -ms-transform: scale(0.99) rotate(1deg) translateX(0rem) translateY(0rem); opacity: 1; } 90% { -ms-transform: scale(1.01) rotate(0deg) translateX(0rem) translateY(0rem); opacity: 1; } 100% { -ms-transform: scale(1) rotate(0deg) translateX(0rem) translateY(0rem); opacity: 1; } } /* ============================================== boingInUp Made by Christian Pucci ============================================== */ .boingInUp { -webkit-animation-name: boingInUp; animation-name: boingInUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes boingInUp { 0% { opacity: 0; -webkit-transform-origin: 50% 0%; -webkit-transform: perspective(800px) rotateX(-90deg); } 50% { opacity: 1; -webkit-transform-origin: 50% 0%; -webkit-transform: perspective(800px) rotateX(50deg); } 100% { opacity: 1; -webkit-transform-origin: 50% 0%; -webkit-transform: perspective(800px) rotateX(0deg); } } @keyframes boingInUp { 0% { opacity: 0; transform-origin: 50% 0%; transform: perspective(800px) rotateX(-90deg); } 50% { opacity: 1; transform-origin: 50% 0%; transform: perspective(800px) rotateX(50deg); } 100% { opacity: 1; transform-origin: 50% 0%; transform: perspective(800px) rotateX(0deg); } } /* ============================================== boingOutDown Made by Christian Pucci ============================================== */ .boingOutDown { -webkit-animation-name: boingOutDown; animation-name: boingOutDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes boingOutDown { 0% { opacity: 1; -webkit-transform-origin: 100% 100%; -webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 20% { opacity: 1; -webkit-transform-origin: 100% 100%; -webkit-transform: perspective(800px) rotateX(0deg) rotateY(10deg); } 30% { opacity: 1; -webkit-transform-origin: 0% 100%; -webkit-transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 40% { opacity: 1; -webkit-transform-origin: 0% 100%; -webkit-transform: perspective(800px) rotateX(10deg) rotateY(10deg); } 100% { opacity: 0; -webkit-transform-origin: 100% 100%; -webkit-transform: perspective(800px) rotateX(90deg) rotateY(0deg); } } @keyframes boingOutDown { 0% { opacity: 1; transform-origin: 100% 100%; transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 20% { opacity: 1; transform-origin: 100% 100%; transform: perspective(800px) rotateX(0deg) rotateY(10deg); } 30% { opacity: 1; transform-origin: 0% 100%; transform: perspective(800px) rotateX(0deg) rotateY(0deg); } 40% { opacity: 1; transform-origin: 0% 100%; transform: perspective(800px) rotateX(10deg) rotateY(10deg); } 100% { opacity: 0; transform-origin: 100% 100%; transform: perspective(800px) rotateX(90deg) rotateY(0deg); } } /* ============================================== bombLeftOut Made by Christian Pucci ============================================== */ .bombLeftOut { -webkit-animation-name: bombLeftOut; animation-name: bombLeftOut; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes bombLeftOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; -webkit-transform-origin: -100% 50%; -webkit-transform: rotate(-160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-transform-origin: -100% 50%; -webkit-transform: rotate(-160deg); -webkit-filter: blur(20px); } } @keyframes bombLeftOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; transform-origin: -100% 50%; transform: rotate(-160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; transform-origin: -100% 50%; transform: rotate(-160deg); -webkit-filter: blur(20px); } } /* ============================================== bombRightOut Made by Christian Pucci ============================================== */ .bombRightOut { -webkit-animation-name: bombRightOut; animation-name: bombRightOut; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes bombRightOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; -webkit-transform-origin: 200% 50%; -webkit-transform: rotate(160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-transform-origin: 200% 50%; -webkit-transform: rotate(160deg); -webkit-filter: blur(20px); } } @keyframes bombRightOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: rotate(0deg); -webkit-filter: blur(0px); } 50% { opacity: 1; transform-origin: 200% 50%; transform: rotate(160deg); -webkit-filter: blur(0px); } 100% { opacity: 0; transform-origin: 200% 50%; transform: rotate(160deg); -webkit-filter: blur(20px); } } /* =========================================================== bounce Made by Justin Aguilar CSS3 ANIMATION CHEAT SHEET =========================================================== */ .bounce{ animation-name: bounce; -webkit-animation-name: bounce; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease; -webkit-animation-timing-function: ease; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes bounce { 0% { transform: translateY(0%) scaleY(0.6); } 60%{ transform: translateY(-100%) scaleY(1.1); } 70%{ transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{ transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{ transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{ transform: translateY(0%) scaleY(1) scaleX(1); } } @-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0%) scaleY(0.6); } 60%{ -webkit-transform: translateY(-100%) scaleY(1.1); } 70%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05); } 80%{ -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1); } 90%{ -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1); } 100%{ -webkit-transform: translateY(0%) scaleY(1) scaleX(1); } } /* ============================================== bounceIn Made by Daniel Eden ============================================== */ .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; -webkit-animation-duration: .75s; animation-duration: .75s; } @keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes bounceIn { from, 20%, 40%, 60%, 80%, to { -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(.97, .97, .97); transform: scale3d(.97, .97, .97); } to { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } /* ============================================== bounceOut Made by Daniel Eden ============================================== */ .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; -webkit-animation-duration: .75s; animation-duration: .75s; } @keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(.9, .9, .9); transform: scale3d(.9, .9, .9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } } /* ============================================================= changeColorToRed ============================================================= */ .changeColorToRed{ animation-name: changeColorToRed; -webkit-animation-name: changeColorToRed; animation-duration: .8s; -webkit-animation-duration: .8s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes changeColorToRed { 0% { transition: transform 0.5s, color 0.5s;} 100% { color:#fc2f3c;} } @-webkit-keyframes changeColorToRed { 0% {-webkit-transition: transform 0.5s, color 0.5s;} 100% { color:#fc2f3c;} } /* ============================================================= changeColorToBlack ============================================================= */ .changeColorToBlack{ animation-name: changeColorToBlack; -webkit-animation-name: changeColorToBlack; animation-duration: .8s; -webkit-animation-duration: .8s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes changeColorToBlack { 0% { transition: transform 0.5s, color 0.5s;} 100% { color:#000000;} } @-webkit-keyframes changeColorToBlack { 0% {-webkit-transition: transform 0.5s, color 0.5s;} 100% { color:#000000;} } /* ============================================================= changeColorToWhite ============================================================= */ .changeColorToWhite{ animation-name: changeColorToWhite; -webkit-animation-name: changeColorToWhite; animation-duration: .8s; -webkit-animation-duration: .8s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes changeColorToWhite { 0% { transition: transform 0.5s, color 0.5s;} 100% { color:#FFFFFF;} } @-webkit-keyframes changeColorToWhite { 0% {-webkit-transition: transform 0.5s, color 0.5s;} 100% { color:#FFFFFF;} } /* ============================================================= changeColorToOrange ============================================================= */ .changeColorToOrange{ animation-name: changeColorToOrange; -webkit-animation-name: changeColorToOrange; animation-duration: .8s; -webkit-animation-duration: .8s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes changeColorToOrange { 0% { transition: transform 0.5s, color 0.5s;} 100% { color:#ff831d;} } @-webkit-keyframes changeColorToOrange { 0% {-webkit-transition: transform 0.5s, color 0.5s;} 100% { color:#ff831d;} } /* ============================================================= changeColorToPink ============================================================= */ .changeColorToPink{ animation-name: changeColorToPink; -webkit-animation-name: changeColorToPink; animation-duration: .8s; -webkit-animation-duration: .8s; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; animation-timing-function: ease-in; -webkit-animation-timing-function: ease-in; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes changeColorToPink { 0% { transition: transform 0.5s, color 0.5s;} 100% { color:#ff9df0;} } @-webkit-keyframes changeColorToPink { 0% {-webkit-transition: transform 0.5s, color 0.5s;} 100% { color:#ff9df0;} } /* ============================================== CoolBaloonFixed Made by Lambert Group ============================================== */ .CoolBaloonFixed { opacity: 1; -webkit-animation: CoolBaloonFixed 155s linear 1; -moz-animation: CoolBaloonFixed 155s linear 1; animation: CoolBaloonFixed 155s linear; -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */ animation-fill-mode: forwards; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -o-transform:translateX(0px); } @-webkit-keyframes CoolBaloonFixed { from { opacity: 1; -webkit-transform: translateX(0px); } 50% { -webkit-transform: translateX(1930px); opacity: 1; } to { -webkit-transform: translateX(1930px); opacity: 0; } } @-moz-keyframes CoolBaloonFixed { from { opacity: 1; -moz-transform: translateX(0px); } 50% { -moz-transform: translateX(1930px); opacity: 1; } to { -moz-transform: translateX(1930px); opacity: 0; } } @keyframes CoolBaloonFixed { from { opacity: 1; transform: translateX(0px); } 50% { transform: translateX(1930px); opacity: 1; } to { transform: translateX(1930px); opacity: 0; } } /* ============================================== CoolBaloonFullWidth Made by Lambert Group ============================================== */ .CoolBaloonFullWidth { opacity: 1; -webkit-animation: CoolBaloonFullWidth 155s linear 1; -moz-animation: CoolBaloonFullWidth 155s linear 1; animation: CoolBaloonFullWidth 155s linear; -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */ animation-fill-mode: forwards; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-transform:translateX(0px); -moz-transform:translateX(0px); -o-transform:translateX(0px); } @-webkit-keyframes CoolBaloonFullWidth { from { opacity: 1; -webkit-transform: translateX(0px); } 50% { -webkit-transform: translateX(2900px); opacity: 1; } to { -webkit-transform: translateX(2900px); opacity: 0; } } @-moz-keyframes CoolBaloonFullWidth { from { opacity: 1; -moz-transform: translateX(0px); } 50% { -moz-transform: translateX(2900px); opacity: 1; } to { -moz-transform: translateX(2900px); opacity: 0; } } @keyframes CoolBaloonFullWidth { from { opacity: 1; transform: translateX(0px); } 50% { transform: translateX(2900px); opacity: 1; } to { transform: translateX(2900px); opacity: 0; } } /* ============================================== CoolCloud1 Made by Lambert Group ============================================== */ .CoolCloud1 { opacity: 0; -webkit-animation: CoolCloud1 85s linear infinite; -moz-animation: CoolCloud1 85s linear infinite; animation: CoolCloud1 85s linear infinite; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-transform:translateX(0); -moz-transform:translateX(0); -o-transform:translateX(0) } @-webkit-keyframes CoolCloud1 { from { opacity: 1; -webkit-transform: translateX(-100%); } to { -webkit-transform: translateX(450%); opacity: 1; } } @-moz-keyframes CoolCloud1 { from { opacity: 1; -moz-transform: translateX(-100%); } to { -moz-transform: translateX(450%); opacity: 1; } } @keyframes CoolCloud1 { from { opacity: 1; transform: translateX(-100%); } to { transform: translateX(450%); opacity: 1; } } /* ============================================== CoolCloud2 Made by Lambert Group ============================================== */ .CoolCloud2 { opacity: 0; -webkit-animation: CoolCloud2 80s linear infinite; -moz-animation: CoolCloud2 80s linear infinite; animation: CoolCloud2 80s linear infinite; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-transform:translateX(0); -moz-transform:translateX(0); -o-transform:translateX(0) } @-webkit-keyframes CoolCloud2 { from { opacity: 1; -webkit-transform: translateX(-100%); } to { -webkit-transform: translateX(450%); opacity: 1; } } @-moz-keyframes CoolCloud2 { from { opacity: 1; -moz-transform: translateX(-100%); } to { -moz-transform: translateX(450%); opacity: 1; } } @keyframes CoolCloud2 { from { opacity: 1; transform: translateX(-100%); } to { transform: translateX(450%); opacity: 1; } } /* ============================================== CoolCloud3 Made by Lambert Group ============================================== */ .CoolCloud3 { opacity: 0; -webkit-animation: CoolCloud3 120s linear infinite; -moz-animation: CoolCloud3 120s linear infinite; animation: CoolCloud3 120s linear infinite; -webkit-animation-delay: 20s; animation-delay: 20s; -webkit-transform:translateX(0); -moz-transform:translateX(0); -o-transform:translateX(0) } @-webkit-keyframes CoolCloud3 { from { opacity: 1; -webkit-transform: translateX(-100%); } to { -webkit-transform: translateX(400%); opacity: 1; } } @-moz-keyframes CoolCloud3 { from { opacity: 1; -moz-transform: translateX(-100%); } to { -moz-transform: translateX(400%); opacity: 1; } } @keyframes CoolCloud3 { from { opacity: 1; transform: translateX(-100%); } to { transform: translateX(400%); opacity: 1; } } /* ============================================== coolBarBottom Made by Lambert Group ============================================== */ .coolBarBottom { width: 2px; overflow: hidden; height: 11em; -webkit-animation: coolBarBottom 2s 1 forwards; -moz-animation: coolBarBottom 2s 1 forwards; -ms-animation: coolBarBottom 2s 1 forwards; animation: coolBarBottom 2s 1 forwards; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @-webkit-keyframes coolBarBottom { 0% { transform: scaleY(0); } 50% { transform: scaleY(1.5); } 100% { transform: scaleY(1); } } @-moz-keyframes coolBarBottom { 0% { transform: scaleY(0); } 50% { transform: scaleY(1.5); } 100% { transform: scaleY(1); } } @-ms-keyframes coolBarBottom { 0% { transform: scaleY(0); } 50% { transform: scaleY(1.5); } 100% { transform: scaleY(1); } } @keyframes coolBarBottom { 0% { transform: scaleY(0); } 50% { transform: scaleY(1.5); } 100% { transform: scaleY(1); } } /* ============================================== coolBarCenter Made by Lambert Group ============================================== */ .coolBarCenter { overflow: hidden; width: 18em; height:2px; -webkit-animation: coolBarCenter 2s 1 forwards; -moz-animation: coolBarCenter 2s 1 forwards; -ms-animation: coolBarCenter 2s 1 forwards; animation: coolBarCenter 2s 1 forwards; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } @-webkit-keyframes coolBarCenter { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.3); } 100% { transform: scaleX(1); } } @-moz-keyframes coolBarCenter { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.3); } 100% { transform: scaleX(1); } } @-ms-keyframes coolBarCenter { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.3); } 100% { transform: scaleX(1); } } @keyframes coolBarCenter { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.3); } 100% { transform: scaleX(1); } } /* ============================================== coolBarCenterFixed Made by Lambert Group ============================================== */ .coolBarCenterFixed { overflow: hidden; width: 10em; height:2px; -webkit-animation: coolBarCenterFixed 2s 1 forwards; -moz-animation: coolBarCenterFixed 2s 1 forwards; -ms-animation: coolBarCenterFixed 2s 1 forwards; animation: coolBarCenterFixed 2s 1 forwards; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } @-webkit-keyframes coolBarCenterFixed { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.3); } 100% { transform: scaleX(1); } } @-moz-keyframes coolBarCenterFixed { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.3); } 100% { transform: scaleX(1); } } @-ms-keyframes coolBarCenterFixed { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.3); } 100% { transform: scaleX(1); } } @keyframes coolBarCenterFixed { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.3); } 100% { transform: scaleX(1); } } /* ============================================== coolBarRight Made by Lambert Group ============================================== */ .coolBarRight { overflow: hidden; width: 18em; height:2px; -webkit-animation: coolBarRight 2s 1 forwards; -moz-animation: coolBarRight 2s 1 forwards; -ms-animation: coolBarRight 2s 1 forwards; animation: coolBarRight 2s 1 forwards; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @-webkit-keyframes coolBarRight { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @-moz-keyframes coolBarRight { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @-ms-keyframes coolBarRight { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @keyframes coolBarRight { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } /* ============================================== coolBarLeft Made by Lambert Group ============================================== */ .coolBarLeft { overflow: hidden; width: 18em; height:2px; -webkit-animation: coolBarLeft 2s 1 forwards; -moz-animation: coolBarLeft 2s 1 forwards; -ms-animation: coolBarLeft 2s 1 forwards; animation: coolBarLeft 2s 1 forwards; transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%; } @-webkit-keyframes coolBarLeft { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @-moz-keyframes coolBarLeft { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @-ms-keyframes coolBarLeft { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @keyframes coolBarLeft { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } /* ============================================== coolBarRightMin Made by Lambert Group ============================================== */ .coolBarRightMin { overflow: hidden; width: 5em; height:2px; -webkit-animation: coolBarRightMin 1s 1 forwards; -moz-animation: coolBarRightMin 1s 1 forwards; -ms-animation: coolBarRightMin 1s 1 forwards; animation: coolBarRightMin 1s 1 forwards; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @-webkit-keyframes coolBarRightMin { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @-moz-keyframes coolBarRightMin { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @-ms-keyframes coolBarRightMin { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @keyframes coolBarRightMin { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } /* ============================================== coolBarLeftMin Made by Lambert Group ============================================== */ .coolBarLeftMin { overflow: hidden; width: 5em; height:2px; -webkit-animation: coolBarLeftMin 1s 1 forwards; -moz-animation: coolBarLeftMin 1s 1 forwards; -ms-animation: coolBarLeftMin 1s 1 forwards; animation: coolBarLeftMin 1s 1 forwards; transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%; } @-webkit-keyframes coolBarLeftMin { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @-moz-keyframes coolBarLeftMin { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @-ms-keyframes coolBarLeftMin { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @keyframes coolBarLeftMin { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } /* ============================================== coolBarRightMinRegular Made by Lambert Group ============================================== */ .coolBarRightMinRegular { overflow: hidden; width: 3.1em; height:2px; -webkit-animation: coolBarRightMinRegular 1s 1 forwards; -moz-animation: coolBarRightMinRegular 1s 1 forwards; -ms-animation: coolBarRightMinRegular 1s 1 forwards; animation: coolBarRightMinRegular 1s 1 forwards; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @-webkit-keyframes coolBarRightMinRegular { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @-moz-keyframes coolBarRightMinRegular { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @-ms-keyframes coolBarRightMinRegular { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @keyframes coolBarRightMinRegular { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } /* ============================================== coolBarLeftMinRegular Made by Lambert Group ============================================== */ .coolBarLeftMinRegular { overflow: hidden; width: 3.1em; height:2px; -webkit-animation: coolBarLeftMinRegular 1s 1 forwards; -moz-animation: coolBarLeftMinRegular 1s 1 forwards; -ms-animation: coolBarLeftMinRegular 1s 1 forwards; animation: coolBarLeftMinRegular 1s 1 forwards; transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%; } @-webkit-keyframes coolBarLeftMinRegular { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @-moz-keyframes coolBarLeftMinRegular { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @-ms-keyframes coolBarLeftMinRegular { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } @keyframes coolBarLeftMinRegular { 0% { transform: scaleX(0); } 50% { transform: scaleX(1.5); } 100% { transform: scaleX(1); } } /* ====================================================================== dance by Clóvis Neto ====================================================================== */ .dance { opacity: 1 !important; visibility: visible !important; -webkit-animation: dance 1 2s linear; -moz-animation: dance 1 2s linear; -ms-animation: dance 1 2s linear; -o-animation: dance 1 2s linear; animation: dance 1 2s linear; } @-webkit-keyframes dance { 0%, 10%, 20% { -webkit-transform: rotateZ(10deg); } 5%, 15%, 25% { -webkit-transform: rotateZ(-10deg); } 35%, 60%, 100% { -webkit-transform: scale(1) rotateZ(0deg); box-shadow: inset 0 0 0 0 transparent; } 40% { -webkit-transform: scale(1.3); box-shadow: inset 0 0 0 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); } } @-moz-keyframes dance { 0%, 10%, 20% { -moz-transform: rotateZ(10deg); } 5%, 15%, 25% { -moz-transform: rotateZ(-10deg); } 35%, 60%, 100% { -moz-transform: scale(1) rotateZ(0deg); box-shadow: inset 0 0 0 0 transparent; } 40% { -moz-transform: scale(1.3); box-shadow: inset 0 0 0 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); } } @-ms-keyframes dance { 0%, 10%, 20% { -ms-transform: rotateZ(10deg); } 5%, 15%, 25% { -ms-transform: rotateZ(-10deg); } 35%, 60%, 100% { -ms-transform: scale(1) rotateZ(0deg); box-shadow: inset 0 0 0 0 transparent; } 40% { -ms-transform: scale(1.3); box-shadow: inset 0 0 0 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); } } @-o-keyframes dance { 0%, 10%, 20% { -o-transform: rotateZ(10deg); } 5%, 15%, 25% { -o-transform: rotateZ(-10deg); } 35%, 60%, 100% { -o-transform: scale(1) rotateZ(0deg); box-shadow: inset 0 0 0 0 transparent; } 40% { -o-transform: scale(1.3); box-shadow: inset 0 0 0 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); } } @-moz-keyframes dance { 0%, 10%, 20% { transform: rotateZ(10deg); } 5%, 15%, 25% { transform: rotateZ(-10deg); } 35%, 60%, 100% { transform: scale(1) rotateZ(0deg); box-shadow: inset 0 0 0 0 transparent; } 40% { transform: scale(1.3); box-shadow: inset 0 0 0 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); } } @-webkit-keyframes dance { 0%, 10%, 20% { transform: rotateZ(10deg); } 5%, 15%, 25% { transform: rotateZ(-10deg); } 35%, 60%, 100% { transform: scale(1) rotateZ(0deg); box-shadow: inset 0 0 0 0 transparent; } 40% { transform: scale(1.3); box-shadow: inset 0 0 0 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); } } @-o-keyframes dance { 0%, 10%, 20% { transform: rotateZ(10deg); } 5%, 15%, 25% { transform: rotateZ(-10deg); } 35%, 60%, 100% { transform: scale(1) rotateZ(0deg); box-shadow: inset 0 0 0 0 transparent; } 40% { transform: scale(1.3); box-shadow: inset 0 0 0 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); } } @keyframes dance { 0%, 10%, 20% { transform: rotateZ(10deg); } 5%, 15%, 25% { transform: rotateZ(-10deg); } 35%, 60%, 100% { transform: scale(1) rotateZ(0deg); box-shadow: inset 0 0 0 0 transparent; } 40% { transform: scale(1.3); box-shadow: inset 0 0 0 0; box-shadow: inset 0 0 0 2px rgba(0,0,0,0.1); } } /* ======================================================================== expandOpen Made by Justin Aguilar CSS3 ANIMATION CHEAT SHEET ======================================================================== */ .expandOpen{ animation-name: expandOpen; -webkit-animation-name: expandOpen; animation-duration: 1.2s; -webkit-animation-duration: 1.2s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; visibility: visible !important; } @keyframes expandOpen { 0% { transform: scale(1.8); } 50% { transform: scale(0.95); } 80% { transform: scale(1.05); } 90% { transform: scale(0.98); } 100% { transform: scale(1); } } @-webkit-keyframes expandOpen { 0% { -webkit-transform: scale(1.8); } 50% { -webkit-transform: scale(0.95); } 80% { -webkit-transform: scale(1.05); } 90% { -webkit-transform: scale(0.98); } 100% { -webkit-transform: scale(1); } } /* ======================================================================== expandUp Made by Justin Aguilar CSS3 ANIMATION CHEAT SHEET ======================================================================== */ .expandUp{ animation-name: expandUp; -webkit-animation-name: expandUp; animation-duration: 0.7s; -webkit-animation-duration: 0.7s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes expandUp { 0% { transform: translateY(100%) scale(0.6) scaleY(0.5); } 60%{ transform: translateY(-7%) scaleY(1.12); } 75%{ transform: translateY(3%); } 100% { transform: translateY(0%) scale(1) scaleY(1); } } @-webkit-keyframes expandUp { 0% { -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5); } 60%{ -webkit-transform: translateY(-7%) scaleY(1.12); } 75%{ -webkit-transform: translateY(3%); } 100% { -webkit-transform: translateY(0%) scale(1) scaleY(1); } } /* ======================================================================== fadeIn Made by Justin Aguilar CSS3 ANIMATION CHEAT SHEET ======================================================================== */ .fadeIn{ animation-name: fadeIn; -webkit-animation-name: fadeIn; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes fadeIn { 0% { transform: scale(0); opacity: 0.0; } 60% { transform: scale(1.1); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn { 0% { -webkit-transform: scale(0); opacity: 0.0; } 60% { -webkit-transform: scale(1.1); } 80% { -webkit-transform: scale(0.9); opacity: 1; } 100% { -webkit-transform: scale(1); opacity: 1; } } /* ============================================== flash Made by Daniel Eden ============================================== */ .flash { -webkit-animation-name: flash; animation-name: flash; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @-webkit-keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } /* ================================================================ flashBang by Clóvis Neto ================================================================ */ .flashBang { opacity: 1 !important; visibility: visible !important; -webkit-animation: flashBang 1 2s linear; -moz-animation: flashBang 1 2s linear; -ms-animation: flashBang 1 2s linear; -o-animation: flashBang 1 2s linear; animation: flashBang 1 2s linear; } @-webkit-keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } @-moz-keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } @-ms-keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } @-o-keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } @-moz-keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } @-webkit-keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } @-o-keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } @keyframes flashBang { 0%, 20% { opacity: 0; } 10%, 30%, 100% { opacity: 1; } } /* ============================================================== flip Made by Daniel Eden ============================================================== */ .flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @-webkit-keyframes flip { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg); transform: perspective(400px) rotate3d(0, 1, 0, -360deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(.95, .95, .95); transform: perspective(400px) scale3d(.95, .95, .95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } /* ============================================== flipBookCenter_Cover1 Made by Lambert Group ============================================== */ .flipBookCenter_Cover1 { backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; transform: rotateY(0deg) translateX(0%) translateZ(0px); -webkit-animation: flipBookCenter_Cover1 1.5s ; animation: flipBookCenter_Cover1 1.5s ; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: center; -webkit-transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */ animation-delay: 2s; } @keyframes flipBookCenter_Cover1 { 0% { transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); } 100% { transform: perspective(2400px) rotateY(-180deg) translateX(0%) translateZ(0px); } } @-webkit-keyframes flipBookCenter_Cover1 { 0% { -webkit-transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); } 100% { -webkit-transform: perspective(2400px) rotateY(-180deg) translateX(0%) translateZ(0px); } } /* ============================================== flipBookCenter_Cover2 Made by Lambert Group ============================================== */ .flipBookCenter_Cover2 { backface-visibility: visible !important; -webkit-backface-visibility: visible !important; transform: rotateY(180deg) translateX(0%) translateZ(0px); -webkit-animation: flipBookCenter_Cover2 1.5s ; animation: flipBookCenter_Cover2 1.5s ; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: center; -webkit-transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation-delay: 1.5s; /* Chrome, Safari, Opera */ animation-delay: 1.5s; } @keyframes flipBookCenter_Cover2 { 0% { transform: perspective(2400px) rotateY(180deg) translateX(0%) translateZ(0px); } 100% { transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); } } @-webkit-keyframes flipBookCenter_Cover2 { 0% { -webkit-transform: perspective(2400px) rotateY(180deg) translateX(0%) translateZ(0px); } 100% { -webkit-transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); } } /* ============================================== flipBookLeft_Cover1 Made by Lambert Group ============================================== */ .flipBookLeft_Cover1 { backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; transform: rotateY(0deg) translateX(0%) translateZ(0px); -webkit-animation: flipBookLeft_Cover1 1.5s ; animation: flipBookLeft_Cover1 1.5s ; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: left; -webkit-transform-origin: left; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation-delay: 2s; /* Chrome, Safari, Opera */ animation-delay: 2s; } @keyframes flipBookLeft_Cover1 { 0% { transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); } 100% { transform: perspective(2400px) rotateY(-180deg) translateX(0%) translateZ(0px); } } @-webkit-keyframes flipBookLeft_Cover1 { 0% { -webkit-transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); } 100% { -webkit-transform: perspective(2400px) rotateY(-180deg) translateX(0%) translateZ(0px); } } /* ============================================== flipBookLeft_Cover2 Made by Lambert Group ============================================== */ .flipBookLeft_Cover2 { backface-visibility: visible !important; -webkit-backface-visibility: visible !important; transform: rotateY(180deg) translateX(-100%) translateZ(0px); -webkit-animation: flipBookLeft_Cover2 1.5s ; animation: flipBookLeft_Cover2 1.5s ; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: left; -webkit-transform-origin: left; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation-delay: 1.5s; /* Chrome, Safari, Opera */ animation-delay: 1.5s; } @keyframes flipBookLeft_Cover2 { 0% { transform: perspective(2400px) rotateY(180deg) translateX(-100%) translateZ(0px); } 100% { transform: perspective(2400px) rotateY(0deg) translateX(-100%) translateZ(0px); } } @-webkit-keyframes flipBookLeft_Cover2 { 0% { -webkit-transform: perspective(2400px) rotateY(180deg) translateX(-100%) translateZ(0px); } 100% { -webkit-transform: perspective(2400px) rotateY(0deg) translateX(-100%) translateZ(0px); } } /* ============================================== flipBookRight_Cover3 Made by Lambert Group ============================================== */ .flipBookRight_Cover3 { backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; transform: rotateY(180deg) translateX(100%) translateZ(0px); -webkit-animation: flipBookRight_Cover3 1.5s ; animation: flipBookRight_Cover3 1.5s ; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: right; -webkit-transform-origin: right; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation-delay: 4s; /* Chrome, Safari, Opera */ animation-delay: 4s; } @keyframes flipBookRight_Cover3 { 0% { transform: perspective(2400px) rotateY(180deg) translateX(100%) translateZ(0px); } 100% { transform: perspective(2400px) rotateY(360deg) translateX(100%) translateZ(0px); } } @-webkit-keyframes flipBookRight_Cover3 { 0% { -webkit-transform: perspective(2400px) rotateY(180deg) translateX(100%) translateZ(0px); } 100% { -webkit-transform: perspective(2400px) rotateY(360deg) translateX(100%) translateZ(0px); } } /* ============================================== flipBookRight_Cover4 Made by Lambert Group ============================================== */ .flipBookRight_Cover4 { backface-visibility: hidden !important; -webkit-backface-visibility: hidden !important; transform: rotateY(0deg) translateX(0%) translateZ(0px); -webkit-animation: flipBookRight_Cover4 1.5s ; animation: flipBookRight_Cover4 1.5s ; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: right; -webkit-transform-origin: right; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation-delay: 4s; /* Chrome, Safari, Opera */ animation-delay: 4s; } @keyframes flipBookRight_Cover4 { 0% { transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); } 100% { transform: perspective(2400px) rotateY(180deg) translateX(0%) translateZ(0px); } } @-webkit-keyframes flipBookRight_Cover4 { 0% { -webkit-transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); } 100% { -webkit-transform: perspective(2400px) rotateY(180deg) translateX(0%) translateZ(0px); } } /* ============================================== flipInX Made by Daniel Eden ============================================== */ .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } /* ============================================== flipInY Made by Daniel Eden ============================================== */ .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @-webkit-keyframes flipInY { from { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } /* ============================================== flipOutX Made by Daniel Eden ============================================== */ .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-duration: .75s; animation-duration: .75s; } @keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } @-webkit-keyframes flipOutX { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; } } /* ============================================== flipOutY Made by Daniel Eden ============================================== */ .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; -webkit-animation-duration: .75s; animation-duration: .75s; } @keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } @-webkit-keyframes flipOutY { from { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg); transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; } } /* ============================================== flipXFast3d ============================================== */ .flipXFast3d { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipXFast3d; animation-name: flipXFast3d; -webkit-animation-duration: 0.7s; animation-duration: 0.7s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-direction: normal; /* Chrome, Safari, Opera */ animation-direction: normal; -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */ animation-iteration-count: 1; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-delay: 1.8s; /* Chrome, Safari, Opera */ animation-delay: 1.8s; } @keyframes flipXFast3d { from { -webkit-transform: perspective(300px) rotate3d(1, 0, 0, 0deg); transform: perspective(300px) rotate3d(1, 0, 0, 0deg); opacity: 1; } to { -webkit-transform: perspective(300px) rotate3d(1, 0, 0, 360deg); transform: perspective(300px) rotate3d(1, 0, 0, 360deg); } } @-webkit-keyframes flipXFast3d { from { -webkit-transform: perspective(300px) rotate3d(1, 0, 0, 0deg); transform: perspective(300px) rotate3d(1, 0, 0, 0deg); opacity: 1; } to { -webkit-transform: perspective(300px) rotate3d(1, 0, 0, 360deg); transform: perspective(300px) rotate3d(1, 0, 0, 360deg); } } /* ============================================== flipX3dPerpetuum ============================================== */ .flipX3dPerpetuum { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipX3dPerpetuum; animation-name: flipX3dPerpetuum; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-direction: normal; /* Chrome, Safari, Opera */ animation-direction: normal; -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */ animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @keyframes flipX3dPerpetuum { from { -webkit-transform: perspective(300px) rotate3d(1, 0, 0, 0deg); transform: perspective(300px) rotate3d(1, 0, 0, 0deg); opacity: 1; } to { -webkit-transform: perspective(300px) rotate3d(1, 0, 0, 360deg); transform: perspective(300px) rotate3d(1, 0, 0, 360deg); } } @-webkit-keyframes flipX3dPerpetuum { from { -webkit-transform: perspective(300px) rotate3d(1, 0, 0, 0deg); transform: perspective(300px) rotate3d(1, 0, 0, 0deg); opacity: 1; } to { -webkit-transform: perspective(300px) rotate3d(1, 0, 0, 360deg); transform: perspective(300px) rotate3d(1, 0, 0, 360deg); } } /* ======================================================== flipY3dPerpetuum Made by Lambert Group ======================================================== */ .flipY3dPerpetuum { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; transform: rotateY(0deg) translateX(0%) translateZ(0px); -webkit-animation: flipY3dPerpetuum 7s; animation: flipY3dPerpetuum 7s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */ animation-iteration-count: infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: center; -webkit-transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } @keyframes flipY3dPerpetuum { 0% { transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); } 100% { transform: perspective(2400px) rotateY(360deg) translateX(0%) translateZ(0px); } } @-webkit-keyframes flipY3dPerpetuum { 0% { -webkit-transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); } 100% { -webkit-transform: perspective(2400px) rotateY(360deg) translateX(0%) translateZ(0px); } } /* ============================================== flipYFastRight3d Made by Lambert Group ============================================== */ .flipYFastRight3d { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; transform: rotateY(0deg) translateX(0%) translateZ(0px); -webkit-animation: flipYFastRight3d 1.0s; animation: flipYFastRight3d 1.0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: center; -webkit-transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation-delay: 1.5s; /* Chrome, Safari, Opera */ animation-delay: 1.5s; } @keyframes flipYFastRight3d { 0% { transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); } 100% { transform: perspective(2400px) rotateY(360deg) translateX(0%) translateZ(0px); } } @-webkit-keyframes flipYFastRight3d { 0% { -webkit-transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); } 100% { -webkit-transform: perspective(2400px) rotateY(360deg) translateX(0%) translateZ(0px); } } /* ============================================== flipYFastLeft3d Made by Lambert Group ============================================== */ .flipYFastLeft3d { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; transform: rotateY(0deg) translateX(0%) translateZ(0px); -webkit-animation: flipYFastLeft3d 1.0s; animation: flipYFastLeft3d 1.0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: center; -webkit-transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation-delay: 1.5s; /* Chrome, Safari, Opera */ animation-delay: 1.5s; } @keyframes flipYFastLeft3d { 0% { transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); } 100% { transform: perspective(2400px) rotateY(-360deg) translateX(0%) translateZ(0px); } } @-webkit-keyframes flipYFastLeft3d { 0% { -webkit-transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); } 100% { -webkit-transform: perspective(2400px) rotateY(-360deg) translateX(0%) translateZ(0px); } } /* ======================================================== flipYFastRight3dChangeColor Made by Lambert Group ======================================================== */ .flipYFastRight3dChangeColor { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; transform: rotateY(0deg) translateX(0%) translateZ(0px); -webkit-animation: flipYFastRight3dChangeColor 1.0s; animation: flipYFastRight3dChangeColor 1.0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: center; -webkit-transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation-delay: 1.5s; /* Chrome, Safari, Opera */ animation-delay: 1.5s; } @keyframes flipYFastRight3dChangeColor { 0% { transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); transition: transform 0.5s, color 0.5s; } 100% { transform: perspective(2400px) rotateY(360deg) translateX(0%) translateZ(0px); color:#ed0a1e; } } @-webkit-keyframes flipYFastRight3dChangeColor { 0% { -webkit-transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); -webkit-transition: -webkit-transform 0.5s, color 0.5s; } 100% { -webkit-transform: perspective(2400px) rotateY(360deg) translateX(0%) translateZ(0px); color:#ed0a1e; } } /* ======================================================== flipYFastLeft3dChangeColor Made by Lambert Group ======================================================== */ .flipYFastLeft3dChangeColor { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; transform: rotateY(0deg) translateX(0%) translateZ(0px); -webkit-animation: flipYFastLeft3dChangeColor 1.0s; animation: flipYFastLeft3dChangeColor 1.0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: center; -webkit-transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation-delay: 1.5s; /* Chrome, Safari, Opera */ animation-delay: 1.5s; } @keyframes flipYFastLeft3dChangeColor { 0% { transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); transition: transform 0.5s, color 0.5s; } 100% { transform: perspective(2400px) rotateY(-360deg) translateX(0%) translateZ(0px); color:#ed0a1e; } } @-webkit-keyframes flipYFastLeft3dChangeColor { 0% { -webkit-transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); -webkit-transition: -webkit-transform 0.5s, color 0.5s; } 100% { -webkit-transform: perspective(2400px) rotateY(-360deg) translateX(0%) translateZ(0px); color:#ed0a1e; } } /* ======================================================== flipYFastLeft3dSpecialColor Made by Lambert Group ======================================================== */ .flipYFastLeft3dSpecialColor { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; transform: rotateY(0deg) translateX(0%) translateZ(0px); -webkit-animation: flipYFastLeft3dSpecialColor 1.0s; animation: flipYFastLeft3dSpecialColor 1.0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: center; -webkit-transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation-delay: 1.5s; /* Chrome, Safari, Opera */ animation-delay: 1.5s; } @keyframes flipYFastLeft3dSpecialColor { 0% { transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); transition: transform 0.5s, color 0.5s; } 100% { transform: perspective(2400px) rotateY(-360deg) translateX(0%) translateZ(0px); color:#fbc337; } } @-webkit-keyframes flipYFastLeft3dSpecialColor { 0% { -webkit-transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); -webkit-transition: -webkit-transform 0.5s, color 0.5s; } 100% { -webkit-transform: perspective(2400px) rotateY(-360deg) translateX(0%) translateZ(0px); color:#fbc337; } } /* ======================================================== flipYFastLeft3dSpecialColor2 Made by Lambert Group ======================================================== */ .flipYFastLeft3dSpecialColor2 { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; transform: rotateY(0deg) translateX(0%) translateZ(0px); -webkit-animation: flipYFastLeft3dSpecialColor2 1.0s; animation: flipYFastLeft3dSpecialColor2 1.0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: center; -webkit-transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation-delay: 1.5s; /* Chrome, Safari, Opera */ animation-delay: 1.5s; } @keyframes flipYFastLeft3dSpecialColor2 { 0% { transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); transition: transform 0.5s, color 0.5s; } 100% { transform: perspective(2400px) rotateY(-360deg) translateX(0%) translateZ(0px); color:#ffde00; } } @-webkit-keyframes flipYFastLeft3dSpecialColor2 { 0% { -webkit-transform: perspective(2400px) rotateY(0deg) translateX(0%) translateZ(0px); -webkit-transition: -webkit-transform 0.5s, color 0.5s; } 100% { -webkit-transform: perspective(2400px) rotateY(-360deg) translateX(0%) translateZ(0px); color:#ffde00; } } /* ======================================================================== floating Made by Justin Aguilar CSS3 ANIMATION CHEAT SHEET ======================================================================== */ .floating{ animation-name: floating; -webkit-animation-name: floating; -ms-animation-name: floating; animation-duration: 1.2s; -webkit-animation-duration: 1.2s; -ms-animation-duration: 1.2s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(17%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(17%); } 100% { -webkit-transform: translateY(0%); } } @-ms-keyframes floating { 0% { -ms-transform: translateY(0rem); } 50% { -ms-transform: translateY(1rem); } 100% { -ms-transform: translateY(0rem); } } /* ======================================================================== floatingEasy Made by Justin Aguilar CSS3 ANIMATION CHEAT SHEET ======================================================================== */ .floatingEasy{ animation-name: floatingEasy; -webkit-animation-name: floatingEasy; -ms-animation-name: floatingEasy; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; -ms-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both; -ms-animation-fill-mode: both; } @keyframes floatingEasy { 0% { transform: translateY(0%); } 50% { transform: translateY(1%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floatingEasy { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(1%); } 100% { -webkit-transform: translateY(0%); } } @-ms-keyframes floatingEasy { 0% { -ms-transform: translateY(0rem); } 50% { -ms-transform: translateY(11rem); } 100% { -ms-transform: translateY(0rem); } } /* ============================================== foolishIn Made by Christian Pucci ============================================== */ .foolishIn { -webkit-animation-name: foolishIn; animation-name: foolishIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes foolishIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotate(360deg); } 20% { opacity: 1; -webkit-transform-origin: 0% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; -webkit-transform-origin: 100% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; -webkit-transform-origin: 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; -webkit-transform-origin: 0% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotate(0deg); } } @keyframes foolishIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotate(360deg); } 20% { opacity: 1; transform-origin: 0% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; transform-origin: 100% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; transform-origin: 0%; transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; transform-origin: 0% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotate(0deg); } } /* ============================================== foolishOut Made by Christian Pucci ============================================== */ .foolishOut { -webkit-animation-name: foolishOut; animation-name: foolishOut; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes foolishOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotate(360deg); } 20% { opacity: 1; -webkit-transform-origin: 0% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; -webkit-transform-origin: 100% 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; -webkit-transform-origin: 0%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; -webkit-transform-origin: 0% 100%; -webkit-transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotate(0deg); } } @keyframes foolishOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotate(360deg); } 20% { opacity: 1; transform-origin: 0% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 40% { opacity: 1; transform-origin: 100% 0%; transform: scale(0.5, 0.5) rotate(0deg); } 60% { opacity: 1; transform-origin: 0%; transform: scale(0.5, 0.5) rotate(0deg); } 80% { opacity: 1; transform-origin: 0% 100%; transform: scale(0.5, 0.5) rotate(0deg); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotate(0deg); } } /* ====================================================================== hatch Made by Justin Aguilar CSS3 ANIMATION CHEAT SHEET ====================================================================== */ .hatch{ animation-name: hatch; -webkit-animation-name: hatch; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; visibility: visible !important; } @keyframes hatch { 0% { transform: rotate(0deg) scaleY(0.6); } 20% { transform: rotate(-2deg) scaleY(1.05); } 35% { transform: rotate(2deg) scaleY(1); } 50% { transform: rotate(-2deg); } 65% { transform: rotate(1deg); } 80% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes hatch { 0% { -webkit-transform: rotate(0deg) scaleY(0.6); } 20% { -webkit-transform: rotate(-2deg) scaleY(1.05); } 35% { -webkit-transform: rotate(2deg) scaleY(1); } 50% { -webkit-transform: rotate(-2deg); } 65% { -webkit-transform: rotate(1deg); } 80% { -webkit-transform: rotate(-1deg); } 100% { -webkit-transform: rotate(0deg); } } /* ============================================== hinge Made by Daniel Eden ============================================== */ .hinge { -webkit-animation-name: hinge; animation-name: hinge; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 0; } } @-webkit-keyframes hinge { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate3d(0, 0, 1, 80deg); transform: rotate3d(0, 0, 1, 80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate3d(0, 0, 1, 60deg); transform: rotate3d(0, 0, 1, 60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 0; } } /* ============================================== hinge2 ============================================== */ .hinge2 { animation-name: hinge2; -webkit-animation-animation-name: hinge2; animation-duration: 1s; -webkit-animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes hinge2 { 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); opacity: 0; } } @keyframes hinge2 { 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 100% { transform: translateY(700px); opacity: 0; } } /* ============================================== holeOut ============================================== */ .holeOut { -webkit-animation-name: holeOut; animation-name: holeOut; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes holeOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1, 1) rotateY(0deg); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0, 0) rotateY(180deg); } } @keyframes holeOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1) rotateY(0deg); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0) rotateY(180deg); } } /* ============================================================== jamp by Clóvis Neto ============================================================== */ .jamp { opacity: 1 !important; visibility: visible !important; -webkit-animation: jamp 1s linear; -moz-animation: jamp 1s linear; -ms-animation: jamp 1s linear; -o-animation: jamp 1s linear; animation: jamp 1s linear; } @-webkit-keyframes jamp { 0% { -webkit-transform: translateY(0); } 10% { -webkit-transform: translateY(-50px); } 25% { -webkit-transform: translateY(-50px) scale(1.1); } 35% { -webkit-transform: translateY(-50px) scale(1); } 45% { -webkit-transform: translateY(-50px) scale(1.2); } 55% { -webkit-transform: translateY(-50px) scale(1); } 65% { -webkit-transform: translate(150px, -50px) scale(0.8); } 85% { -webkit-transform: translate(150px, -50px) scale(1.2); } 95% { -webkit-transform: translate(0, 0px) scale(1); } 100% { -webkit-transform: translate(0, 0); } } @-moz-keyframes jamp { 0% { -moz-transform: translateY(0); } 10% { -moz-transform: translateY(-50px); } 25% { -moz-transform: translateY(-50px) scale(1.1); } 35% { -moz-transform: translateY(-50px) scale(1); } 45% { -moz-transform: translateY(-50px) scale(1.2); } 55% { -moz-transform: translateY(-50px) scale(1); } 65% { -moz-transform: translate(150px, -50px) scale(0.8); } 85% { -moz-transform: translate(150px, -50px) scale(1.2); } 95% { -moz-transform: translate(0, 0px) scale(1); } 100% { -moz-transform: translate(0, 0); } } @-ms-keyframes jamp { 0% { -ms-transform: translateY(0); } 10% { -ms-transform: translateY(-50px); } 25% { -ms-transform: translateY(-50px) scale(1.1); } 35% { -ms-transform: translateY(-50px) scale(1); } 45% { -ms-transform: translateY(-50px) scale(1.2); } 55% { -ms-transform: translateY(-50px) scale(1); } 65% { -ms-transform: translate(150px, -50px) scale(0.8); } 85% { -ms-transform: translate(150px, -50px) scale(1.2); } 95% { -ms-transform: translate(0, 0px) scale(1); } 100% { -ms-transform: translate(0, 0); } } @-o-keyframes jamp { 0% { -o-transform: translateY(0); } 10% { -o-transform: translateY(-50px); } 25% { -o-transform: translateY(-50px) scale(1.1); } 35% { -o-transform: translateY(-50px) scale(1); } 45% { -o-transform: translateY(-50px) scale(1.2); } 55% { -o-transform: translateY(-50px) scale(1); } 65% { -o-transform: translate(150px, -50px) scale(0.8); } 85% { -o-transform: translate(150px, -50px) scale(1.2); } 95% { -o-transform: translate(0, 0px) scale(1); } 100% { -o-transform: translate(0, 0); } } @-moz-keyframes jamp { 0% { transform: translateY(0); } 10% { transform: translateY(-50px); } 25% { transform: translateY(-50px) scale(1.1); } 35% { transform: translateY(-50px) scale(1); } 45% { transform: translateY(-50px) scale(1.2); } 55% { transform: translateY(-50px) scale(1); } 65% { transform: translate(150px, -50px) scale(0.8); } 85% { transform: translate(150px, -50px) scale(1.2); } 95% { transform: translate(0, 0px) scale(1); } 100% { transform: translate(0, 0); } } @-webkit-keyframes jamp { 0% { transform: translateY(0); } 10% { transform: translateY(-50px); } 25% { transform: translateY(-50px) scale(1.1); } 35% { transform: translateY(-50px) scale(1); } 45% { transform: translateY(-50px) scale(1.2); } 55% { transform: translateY(-50px) scale(1); } 65% { transform: translate(150px, -50px) scale(0.8); } 85% { transform: translate(150px, -50px) scale(1.2); } 95% { transform: translate(0, 0px) scale(1); } 100% { transform: translate(0, 0); } } @-o-keyframes jamp { 0% { transform: translateY(0); } 10% { transform: translateY(-50px); } 25% { transform: translateY(-50px) scale(1.1); } 35% { transform: translateY(-50px) scale(1); } 45% { transform: translateY(-50px) scale(1.2); } 55% { transform: translateY(-50px) scale(1); } 65% { transform: translate(150px, -50px) scale(0.8); } 85% { transform: translate(150px, -50px) scale(1.2); } 95% { transform: translate(0, 0px) scale(1); } 100% { transform: translate(0, 0); } } @keyframes jamp { 0% { transform: translateY(0); } 10% { transform: translateY(-50px); } 25% { transform: translateY(-50px) scale(1.1); } 35% { transform: translateY(-50px) scale(1); } 45% { transform: translateY(-50px) scale(1.2); } 55% { transform: translateY(-50px) scale(1); } 65% { transform: translate(150px, -50px) scale(0.8); } 85% { transform: translate(150px, -50px) scale(1.2); } 95% { transform: translate(0, 0px) scale(1); } 100% { transform: translate(0, 0); } } /* ============================================== jello Made by Daniel Eden ============================================== */ .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } @-webkit-keyframes jello { from, 11.1%, to { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.390625deg) skewY(0.390625deg); transform: skewX(0.390625deg) skewY(0.390625deg); } 88.8% { -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg); transform: skewX(-0.1953125deg) skewY(-0.1953125deg); } } /* ====================================================================== journal by Clóvis Neto ====================================================================== */ .journal { -webkit-animation: journal 1 2s ease-in; -moz-animation: journal 1 2s ease-in; -ms-animation: journal 1 2s ease-in; -o-animation: journal 1 2s ease-in; animation: journal 1 2s ease-in; opacity: 1 !important; visibility: visible !important; } @-webkit-keyframes journal { 0% { -webkit-transform: scale(0) rotate(-360deg); } 80% { -webkit-transform: scale(0.5) rotate(-180deg); } 100% { -webkit-transform: scale(1) rotate(0); } } @-moz-keyframes journal { 0% { -moz-transform: scale(0) rotate(-360deg); } 80% { -moz-transform: scale(0.5) rotate(-180deg); } 100% { -moz-transform: scale(1) rotate(0); } } @-ms-keyframes journal { 0% { -ms-transform: scale(0) rotate(-360deg); } 80% { -ms-transform: scale(0.5) rotate(-180deg); } 100% { -ms-transform: scale(1) rotate(0); } } @-o-keyframes journal { 0% { -o-transform: scale(0) rotate(-360deg); } 80% { -o-transform: scale(0.5) rotate(-180deg); } 100% { -o-transform: scale(1) rotate(0); } } @-moz-keyframes journal { 0% { transform: scale(0) rotate(-360deg); } 80% { transform: scale(0.5) rotate(-180deg); } 100% { transform: scale(1) rotate(0); } } @-webkit-keyframes journal { 0% { transform: scale(0) rotate(-360deg); } 80% { transform: scale(0.5) rotate(-180deg); } 100% { transform: scale(1) rotate(0); } } @-o-keyframes journal { 0% { transform: scale(0) rotate(-360deg); } 80% { transform: scale(0.5) rotate(-180deg); } 100% { transform: scale(1) rotate(0); } } @keyframes journal { 0% { transform: scale(0) rotate(-360deg); } 80% { transform: scale(0.5) rotate(-180deg); } 100% { transform: scale(1) rotate(0); } } /* ============================================== lightSpeedInLeft Made by Daniel Eden ============================================== */ .lightSpeedInLeft { -webkit-animation-name: lightSpeedInLeft; animation-name: lightSpeedInLeft; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes lightSpeedInLeft { from { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes lightSpeedInLeft { from { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } 60% { -webkit-transform: skewX(-20deg); transform: skewX(-20deg); opacity: 1; } 80% { -webkit-transform: skewX(5deg); transform: skewX(5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } /* ============================================== lightSpeedInRight Made by Daniel Eden ============================================== */ .lightSpeedInRight { -webkit-animation-name: lightSpeedInRight; animation-name: lightSpeedInRight; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes lightSpeedInRight { from { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes lightSpeedInRight { from { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } /* ============================================== lightSpeedOutRight Made by Daniel Eden ============================================== */ .lightSpeedOutRight { -webkit-animation-name: lightSpeedOutRight; animation-name: lightSpeedOutRight; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes lightSpeedOutRight { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @-webkit-keyframes lightSpeedOutRight { from { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } /* ============================================== lightSpeedOutLeft Made by Daniel Eden ============================================== */ .lightSpeedOutLeft { -webkit-animation-name: lightSpeedOutLeft; animation-name: lightSpeedOutLeft; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes lightSpeedOutLeft { from { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } } @-webkit-keyframes lightSpeedOutLeft { from { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } } /* ============================================== magic Made by Christian Pucci ============================================== */ .magic { -webkit-animation-name: magic; animation-name: magic; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes magic { 0% { opacity: 1; -webkit-transform-origin: 100% 200%; -webkit-transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; -webkit-transform-origin: 200% 500%; -webkit-transform: scale(0, 0) rotate(270deg); } } @keyframes magic { 0% { opacity: 1; transform-origin: 100% 200%; transform: scale(1, 1) rotate(0deg); } 100% { opacity: 0; transform-origin: 200% 500%; transform: scale(0, 0) rotate(270deg); } } /* ============================================== magnifying ============================================== */ .magnifying{ -webkit-animation-name: magnifying; animation-name: magnifying; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @-webkit-keyframes magnifying{ 0% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } 100% { opacity: 1; -webkit-transform: scale(1.4,1.4) translate(33%); transform: scale(1.4,1.4) translate(33%); } } @keyframes magnifying{ 0% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } 100% { opacity: 1; -webkit-transform: scale(1.4,1.4) translate(33%); transform: scale(1.4,1.4) translate(33%); } } /* ============================================== magBounce ============================================== */ .magBounce{ -webkit-animation-name: magBounce; animation-name: magBounce; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @-webkit-keyframes magBounce{ 0% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } 100% { opacity: 1; -webkit-transform: scale(1.4,1.4); transform: scale(1.4,1.4); } } @keyframes magBounce{ 0% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } 100% { opacity: 1; -webkit-transform: scale(1.4,1.4); transform: scale(1.4,1.4); } } /* ============================================== openDownLeft Made by Christian Pucci ============================================== */ .openDownLeft { -webkit-animation-name: openDownLeft; animation-name: openDownLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes openDownLeft { 0% { -webkit-transform-origin: bottom left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } 100% { -webkit-transform-origin: bottom left; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; } } @keyframes openDownLeft { 0% { transform-origin: bottom left; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { transform-origin: bottom left; transform: rotate(-110deg); animation-timing-function: ease-in-out; } } /* ============================================== openDownRight Made by Christian Pucci ============================================== */ .openDownRight { -webkit-animation-name: openDownRight; animation-name: openDownRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes openDownRight { 0% { -webkit-transform-origin: bottom right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } 100% { -webkit-transform-origin: bottom right; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; } } @keyframes openDownRight { 0% { transform-origin: bottom right; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { transform-origin: bottom right; transform: rotate(110deg); animation-timing-function: ease-in-out; } } /* ============================================== openUpLeft Made by Christian Pucci ============================================== */ .openUpLeft { -webkit-animation-name: openUpLeft; animation-name: openUpLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes openUpLeft { 0% { -webkit-transform-origin: top left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } 100% { -webkit-transform-origin: top left; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; } } @keyframes openUpLeft { 0% { transform-origin: top left; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { transform-origin: top left; transform: rotate(110deg); animation-timing-function: ease-in-out; } } /* ============================================== openUpRight Made by Christian Pucci ============================================== */ .openUpRight { -webkit-animation-name: openUpRight; animation-name: openUpRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes openUpRight { 0% { -webkit-transform-origin: top right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } 100% { -webkit-transform-origin: top right; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; } } @keyframes openUpRight { 0% { transform-origin: top right; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { transform-origin: top right; transform: rotate(-110deg); animation-timing-function: ease-in-out; } } /* ============================================== openDownLeftRetourn Made by Christian Pucci ============================================== */ .openDownLeftRetourn { -webkit-animation-name: openDownLeftRetourn; animation-name: openDownLeftRetourn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes openDownLeftRetourn { 0% { -webkit-transform-origin: bottom left; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: bottom left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } } @keyframes openDownLeftRetourn { 0% { transform-origin: bottom left; transform: rotate(-110deg); animation-timing-function: ease-in-out; } 100% { transform-origin: bottom left; transform: rotate(0deg); animation-timing-function: ease-out; } } /* ============================================== openDownRightRetourn Made by Christian Pucci ============================================== */ .openDownRightRetourn { -webkit-animation-name: openDownRightRetourn; animation-name: openDownRightRetourn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes openDownRightRetourn { 0% { -webkit-transform-origin: bottom right; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: bottom right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } } @keyframes openDownRightRetourn { 0% { transform-origin: bottom right; transform: rotate(110deg); animation-timing-function: ease-in-out; } 100% { transform-origin: bottom right; transform: rotate(0deg); animation-timing-function: ease-out; } } /* ============================================== openUpLeftRetourn Made by Christian Pucci ============================================== */ .openUpLeftRetourn { -webkit-animation-name: openUpLeftRetourn; animation-name: openUpLeftRetourn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes openUpLeftRetourn { 0% { -webkit-transform-origin: top left; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: top left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } } @keyframes openUpLeftRetourn { 0% { transform-origin: top left; transform: rotate(110deg); animation-timing-function: ease-in-out; } 100% { transform-origin: top left; transform: rotate(0deg); animation-timing-function: ease-out; } } /* ============================================== openUpRightRetourn Made by Christian Pucci ============================================== */ .openUpRightRetourn { -webkit-animation-name: openUpRightRetourn; animation-name: openUpRightRetourn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes openUpRightRetourn { 0% { -webkit-transform-origin: top right; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform-origin: top right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } } @keyframes openUpRightRetourn { 0% { transform-origin: top right; transform: rotate(-110deg); animation-timing-function: ease-in-out; } 100% { transform-origin: top right; transform: rotate(0deg); animation-timing-function: ease-out; } } /* ============================================== openDownLeftOut Made by Christian Pucci ============================================== */ .openDownLeftOut { -webkit-animation-name: openDownLeftOut; animation-name: openDownLeftOut; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes openDownLeftOut { 0% { opacity: 1; -webkit-transform-origin: bottom left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: bottom left; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; } } @keyframes openDownLeftOut { 0% { opacity: 1; transform-origin: bottom left; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: bottom left; transform: rotate(-110deg); animation-timing-function: ease-in-out; } } /* ============================================== openDownRightOut Made by Christian Pucci ============================================== */ .openDownRightOut { -webkit-animation-name: openDownRightOut; animation-name: openDownRightOut; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes openDownRightOut { 0% { opacity: 1; -webkit-transform-origin: bottom right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: bottom right; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; } } @keyframes openDownRightOut { 0% { opacity: 1; transform-origin: bottom right; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: bottom right; transform: rotate(110deg); animation-timing-function: ease-in-out; } } /* ============================================== openUpLeftOut Made by Christian Pucci ============================================== */ .openUpLeftOut { -webkit-animation-name: openUpLeftOut; animation-name: openUpLeftOut; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes openUpLeftOut { 0% { opacity: 1; -webkit-transform-origin: top left; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: top left; -webkit-transform: rotate(110deg); -webkit-animation-timing-function: ease-in-out; } } @keyframes openUpLeftOut { 0% { opacity: 1; transform-origin: top left; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: top left; transform: rotate(110deg); animation-timing-function: ease-in-out; } } /* ============================================== openUpRightOut Made by Christian Pucci ============================================== */ .openUpRightOut { -webkit-animation-name: openUpRightOut; animation-name: openUpRightOut; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes openUpRightOut { 0% { opacity: 1; -webkit-transform-origin: top right; -webkit-transform: rotate(0deg); -webkit-animation-timing-function: ease-out; } 100% { opacity: 0; -webkit-transform-origin: top right; -webkit-transform: rotate(-110deg); -webkit-animation-timing-function: ease-in-out; } } @keyframes openUpRightOut { 0% { opacity: 1; transform-origin: top right; transform: rotate(0deg); animation-timing-function: ease-out; } 100% { opacity: 0; transform-origin: top right; transform: rotate(-110deg); animation-timing-function: ease-in-out; } } /* ============================================== perpetuumChainLink1 Made by Lambert Group ============================================== */ .perpetuumChainLink1 { -webkit-animation: perpetuumChainLink1 25s linear infinite; -moz-animation: perpetuumChainLink1 25s linear infinite; animation: perpetuumChainLink1 25s linear infinite; -webkit-transform:translateX(0); -moz-transform:translateX(0); -o-transform:translateX(0) -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes perpetuumChainLink1 { from { opacity: 1; } to { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 1; } } @-moz-keyframes perpetuumChainLink1 { from { opacity: 1; } to { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 1; } } @keyframes perpetuumChainLink1 { from { opacity: 1; } to { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 1; } } /* ============================================== perpetuumChainLink2 Made by Lambert Group ============================================== */ .perpetuumChainLink2 { -webkit-animation: perpetuumChainLink2 25s linear infinite; -moz-animation: perpetuumChainLink2 25s linear infinite; animation: perpetuumChainLink2 25s linear infinite; -webkit-transform:translateX(0); -moz-transform:translateX(0); -o-transform:translateX(0); -webkit-animation-direction: reverse; animation-direction: reverse; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes perpetuumChainLink2 { from { opacity: 1; } to { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 1; } } @-moz-keyframes perpetuumChainLink2 { from { opacity: 1; } to { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 1; } } @keyframes perpetuumChainLink2 { from { opacity: 1; } to { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 1; } } /* ============================================== perspectiveLeft Made by Christian Pucci ============================================== */ .perspectiveLeft { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveLeft; animation-name: perspectiveLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes perspectiveLeft { 0% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); } } @keyframes perspectiveLeft { 0% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateY(-180deg); } } /* ============================================== perspectiveRight Made by Christian Pucci ============================================== */ .perspectiveRight { -webkit-backface-visibility: hidden !important; backface-visibility: hidden !important; -webkit-animation-name: perspectiveRight; animation-name: perspectiveRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes perspectiveRight { 0% { -webkit-transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); } 100% { -webkit-transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); } } @keyframes perspectiveRight { 0% { transform-origin: 100% 0; transform: perspective(800px) rotateY(0deg); } 100% { transform-origin: 100% 0; transform: perspective(800px) rotateY(180deg); } } /* ============================================== perspectiveRightIn Made by Christian Pucci ============================================== */ .perspectiveRightIn { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveRightIn; animation-name: perspectiveRightIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-direction: reverse; /* Chrome, Safari, Opera */ animation-direction: reverse; } @-webkit-keyframes perspectiveRightIn { 0% { -webkit-transform-origin: 100% 0; -webkit-transform: perspective(400px) rotateY(-180deg); } 100% { -webkit-transform-origin: 100% 0; -webkit-transform: perspective(400px) rotateY(0deg); } } @keyframes perspectiveRightIn { 0% { transform-origin: 100% 0; transform: perspective(400px) rotateY(-180deg); } 100% { transform-origin: 100% 0; transform: perspective(400px) rotateY(0deg); } } /* ============================================== perspectiveUp Made by Christian Pucci ============================================== */ .perspectiveUp { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveUp; animation-name: perspectiveUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes perspectiveUp { 0% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(180deg); } } @keyframes perspectiveUp { 0% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateX(180deg); } } /* ============================================== perspectiveDownZero Made by Christian Pucci ============================================== */ .perspectiveDownZero { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveDownZero; animation-name: perspectiveDownZero; -webkit-animation-duration: 0s; animation-duration: 0s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes perspectiveDownZero { 0% { -webkit-transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(0deg); } 100% { -webkit-transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(-180deg); } } @keyframes perspectiveDownZero { 0% { transform-origin: 0 100%; transform: perspective(800px) rotateX(0deg); } 100% { transform-origin: 0 100%; transform: perspective(800px) rotateX(-180deg); } } /* ============================================== perspectiveDown Made by Christian Pucci ============================================== */ .perspectiveDown { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveDown; animation-name: perspectiveDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes perspectiveDown { 0% { -webkit-transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(0deg); } 100% { -webkit-transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(-180deg); } } @keyframes perspectiveDown { 0% { transform-origin: 0 100%; transform: perspective(800px) rotateX(0deg); } 100% { transform-origin: 0 100%; transform: perspective(800px) rotateX(-180deg); } } /* ======================================================= perspectiveLeftRetourn Made by Christian Pucci ======================================================= */ .perspectiveLeftRetourn { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveLeftRetourn; animation-name: perspectiveLeftRetourn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes perspectiveLeftRetourn { 0% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(-180deg); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg); } } @keyframes perspectiveLeftRetourn { 0% { transform-origin: 0 0; transform: perspective(800px) rotateY(-180deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateY(0deg); } } /* ========================================================= perspectiveRightRetourn Made by Christian Pucci ========================================================= */ .perspectiveRightRetourn { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveRightRetourn; animation-name: perspectiveRightRetourn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes perspectiveRightRetourn { 0% { -webkit-transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(180deg); } 100% { -webkit-transform-origin: 100% 0; -webkit-transform: perspective(800px) rotateY(0deg); } } @keyframes perspectiveRightRetourn { 0% { transform-origin: 100% 0; transform: perspective(800px) rotateY(180deg); } 100% { transform-origin: 100% 0; transform: perspective(800px) rotateY(0deg); } } /* ======================================================== perspectiveUpRetourn Made by Christian Pucci ======================================================== */ .perspectiveUpRetourn { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveUpRetourn; animation-name: perspectiveUpRetourn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes perspectiveUpRetourn { 0% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(180deg); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg); } } @keyframes perspectiveUpRetourn { 0% { transform-origin: 0 0; transform: perspective(800px) rotateX(180deg); } 100% { transform-origin: 0 0; transform: perspective(800px) rotateX(0deg); } } /* ======================================================== perspectiveDownRetourn Made by Christian Pucci ======================================================== */ .perspectiveDownRetourn { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveDownRetourn; animation-name: perspectiveDownRetourn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes perspectiveDownRetourn { 0% { -webkit-transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(-180deg); } 100% { -webkit-transform-origin: 0 100%; -webkit-transform: perspective(800px) rotateX(0deg); } } @keyframes perspectiveDownRetourn { 0% { transform-origin: 0 100%; transform: perspective(800px) rotateX(-180deg); } 100% { transform-origin: 0 100%; transform: perspective(800px) rotateX(0deg); } } /* originally authored by Nick Pettit */ /* ============================================== rollInRight Daniel Eden ============================================== */ .rollInRight { -webkit-animation-name: rollInRight; animation-name: rollInRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes rollInRight { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes rollInRight { from { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } /* originally authored by Nick Pettit */ /* ============================================== rollInLeft Daniel Eden ============================================== */ .rollInLeft { -webkit-animation-name: rollInLeft; animation-name: rollInLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes rollInLeft { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @-webkit-keyframes rollInLeft { from { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } /* originally authored by Nick Pettit */ /* ============================================== rollOutRight Daniel Eden ============================================== */ .rollOutRight { -webkit-animation-name: rollOutRight; animation-name: rollOutRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes rollOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } @-webkit-keyframes rollOutRight { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } } /* originally authored by Nick Pettit */ /* ============================================== rollOutLeft Daniel Eden ============================================== */ .rollOutLeft { -webkit-animation-name: rollOutLeft; animation-name: rollOutLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes rollOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } } @-webkit-keyframes rollOutLeft { from { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } } /* ============================================== rotateEaseForward ============================================== */ .rotateEaseForward { -webkit-animation-name: rotateEaseForward; animation-name: rotateEaseForward; -webkit-animation-duration: 35s; animation-duration: 35s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function:linear;/*ease ease-in ease-out ease-in-out*/ animation-timing-function:linear; -webkit-animation-iteration-count: infinite;/*number|initial|inherit*/ animation-iteration-count: infinite; } @-moz-keyframes rotateEaseForward { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(1440deg); } } @-webkit-keyframes rotateEaseForward { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(1440deg); } } @-o-keyframes rotateEaseForward { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(1440deg); } } @keyframes rotateEaseForward { from { transform: rotate(0deg); } to { transform: rotate(1440deg); } } /* ============================================== rotateEaseBackward ============================================== */ .rotateEaseBackward { -webkit-animation-name: rotateEaseBackward; animation-name: rotateEaseBackward; -webkit-animation-duration: 35s; animation-duration: 35s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function:linear;/*ease ease-in ease-out ease-in-out*/ animation-timing-function:linear;/*number|initial|inherit*/ -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-moz-keyframes rotateEaseBackward { from { -moz-transform: rotate(1440deg); } to { -moz-transform: rotate(0deg); } } @-webkit-keyframes rotateEaseBackward { from { -webkit-transform: rotate(1440deg); } to { -webkit-transform: rotate(0deg); } } @-o-keyframes rotateEaseBackward { from { -o-transform: rotate(1440deg); } to { -o-transform: rotate(0deg); } } @keyframes rotateEaseBackward { from {transform: rotate(1440deg); } to { transform: rotate(0deg); } } /* ============================================== rotateFastForward ============================================== */ .rotateFastForward { -webkit-animation-name: rotateFastForward; animation-name: rotateFastForward; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function:linear;/*ease ease-in ease-out ease-in-out*/ animation-timing-function:linear; -webkit-animation-iteration-count: infinite;/*number|initial|inherit*/ animation-iteration-count: infinite; } @-moz-keyframes rotateFastForward { from { -moz-transform: rotate(0deg); } to { -moz-transform: rotate(360deg); } } @-webkit-keyframes rotateFastForward { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } @-o-keyframes rotateFastForward { from { -o-transform: rotate(0deg); } to { -o-transform: rotate(360deg); } } @keyframes rotateFastForward { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ============================================== rotateFastBackward ============================================== */ .rotateFastBackward { -webkit-animation-name: rotateFastBackward; -moz-animation-name: rotateFastBackward; -o-animation-name: rotateFastBackward; animation-name: rotateFastBackward; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function:linear;/*ease ease-in ease-out ease-in-out*/ -moz-animation-timing-function:linear; -o-animation-timing-function:linear; animation-timing-function:linear;/*number|initial|inherit*/ -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; } @-moz-keyframes rotateFastBackward { from { -moz-transform: rotate(360deg); } to { -moz-transform: rotate(0deg); } } @-webkit-keyframes rotateFastBackward { from { -webkit-transform: rotate(360deg); } to { -webkit-transform: rotate(0deg); } } @-o-keyframes rotateFastBackward { from { -o-transform: rotate(360deg); } to { -o-transform: rotate(0deg); } } @keyframes rotateFastBackward { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } /* ============================================== rotateLeft Made by Christian Pucci ============================================== */ .rotateLeft { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: rotateLeft; animation-name: rotateLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rotateLeft { 0% { opacity: 1; -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg) translateZ(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateY(180deg) translateZ(300px); } } @keyframes rotateLeft { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateY(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateY(180deg) translateZ(300px); } } /* ============================================== rotateRight Made by Christian Pucci ============================================== */ .rotateRight { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: rotateRight; animation-name: rotateRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rotateRight { 0% { opacity: 1; -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateY(0deg) translate3d(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateY(-180deg) translateZ(150px); } } @keyframes rotateRight { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateY(0deg) translate3d(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateY(-180deg) translateZ(150px); } } /* ============================================== rotateUp Made by Christian Pucci ============================================== */ .rotateUp { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: rotateUp; animation-name: rotateUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rotateUp { 0% { opacity: 1; -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 0; -webkit-transform: perspective(800px) rotateX(180deg) translateZ(100px); } } @keyframes rotateUp { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 0; transform: perspective(800px) rotateX(180deg) translateZ(100px); } } /* ============================================== rotateDown Made by Christian Pucci ============================================== */ .rotateDown { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: rotateDown; animation-name: rotateDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes rotateDown { 0% { opacity: 1; -webkit-transform-origin: 0 0; -webkit-transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 100%; -webkit-transform: perspective(800px) rotateX(-180deg) translateZ(300px); } } @keyframes rotateDown { 0% { opacity: 1; transform-origin: 0 0; transform: perspective(800px) rotateX(0deg) translateZ(0px); } 100% { opacity: 0; transform-origin: 50% 100%; transform: perspective(800px) rotateX(-180deg) translateZ(300px); } } /* ============================================== rotateInRight Made by Daniel Eden ============================================== */ .rotateInRight { -webkit-animation-name: rotateInRight; animation-name: rotateInRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes rotateInRight { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes rotateInRight { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } /* ============================================== rotateInLeft Made by Daniel Eden ============================================== */ .rotateInLeft { -webkit-animation-name: rotateInLeft; animation-name: rotateInLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes rotateInLeft { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes rotateInLeft { from { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } /* ============================================== rotateInDownLeft Made by Daniel Eden ============================================== */ .rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes rotateInDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } /* ============================================== rotateInDownRight Made by Daniel Eden ============================================== */ .rotateInDownRight { -webkit-animation-name: rotateInDownRight; animation-name: rotateInDownRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes rotateInDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } /* ============================================== rotateInUpLeft Made by Daniel Eden ============================================== */ .rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes rotateInUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: none; transform: none; opacity: 1; } } /* ============================================== rotateInUpRight Made by Daniel Eden ============================================== */ .rotateInUpRight { -webkit-animation-name: rotateInUpRight; animation-name: rotateInUpRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes rotateInUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -90deg); transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: none; transform: none; opacity: 1; } } /* ============================================== rotateOut Made by Daniel Eden ============================================== */ .rotateOut { -webkit-animation-name: rotateOut; animation-name: rotateOut; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } @-webkit-keyframes rotateOut { from { -webkit-transform-origin: center; transform-origin: center; opacity: 1; } to { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, 200deg); transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } } /* ============================================== rotateOutDownLeft Made by Daniel Eden ============================================== */ .rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } @-webkit-keyframes rotateOutDownLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, 45deg); transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } } /* ============================================== rotateOutDownRight Made by Daniel Eden ============================================== */ .rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @-webkit-keyframes rotateOutDownRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } /* ============================================== rotateOutUpLeft Made by Daniel Eden ============================================== */ .rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } @-webkit-keyframes rotateOutUpLeft { from { -webkit-transform-origin: left bottom; transform-origin: left bottom; opacity: 1; } to { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-transform: rotate3d(0, 0, 1, -45deg); transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } } /* ============================================== rotateOutUpRight Made by Daniel Eden ============================================== */ .rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } @-webkit-keyframes rotateOutUpRight { from { -webkit-transform-origin: right bottom; transform-origin: right bottom; opacity: 1; } to { -webkit-transform-origin: right bottom; transform-origin: right bottom; -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } } /* ============================================== rubberBand Made by Daniel Eden ============================================== */ .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes rubberBand { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(.95, 1.05, 1); transform: scale3d(.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, .95, 1); transform: scale3d(1.05, .95, 1); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } /* ==================================================================== scaleBounce by Clóvis Neto ==================================================================== */ .scaleBounce { opacity: 1 !important; visibility: visible !important; -webkit-animation: scaleBounce 1s linear; -moz-animation: scaleBounce 1s linear; -ms-animation: scaleBounce 1s linear; -o-animation: scaleBounce 1s linear; animation: scaleBounce 1s linear; } @-webkit-keyframes scaleBounce { 0% { -webkit-transform: scale(1.5); opacity: 0; } 50% { -webkit-transform: scale(1); } 70% { -webkit-transform: scale(1.1); } 100% { opacity: 1; -webkit-transform: scale(1); } } @-moz-keyframes scaleBounce { 0% { -moz-transform: scale(1.5); opacity: 0; } 50% { -moz-transform: scale(1); } 70% { -moz-transform: scale(1.1); } 100% { opacity: 1; -moz-transform: scale(1); } } @-o-keyframes scaleBounce { 0% { -o-transform: scale(1.5); opacity: 0; } 50% { -o-transform: scale(1); } 70% { -o-transform: scale(1.1); } 100% { opacity: 1; -o-transform: scale(1); } } @-ms-keyframes scaleBounce { 0% { -ms-transform: scale(1.5); opacity: 0; } 50% { -ms-transform: scale(1); } 70% { -ms-transform: scale(1.1); } 100% { opacity: 1; -ms-transform: scale(1); } } @-moz-keyframes scaleBounce { 0% { transform: scale(1.5); opacity: 0; } 50% { transform: scale(1); } 70% { transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } @-webkit-keyframes scaleBounce { 0% { transform: scale(1.5); opacity: 0; } 50% { transform: scale(1); } 70% { transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } @-o-keyframes scaleBounce { 0% { transform: scale(1.5); opacity: 0; } 50% { transform: scale(1); } 70% { transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } @keyframes scaleBounce { 0% { transform: scale(1.5); opacity: 0; } 50% { transform: scale(1); } 70% { transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } /* ============================================== scaleIn ============================================== */ .scaleIn { -webkit-animation-name: scaleIn; animation-name: scaleIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes scaleIn { 0% { opacity: 0; -webkit-transform: scale(1,1); transform: scale(1,1); } 50% { opacity: 1; -webkit-transform: scale(5,6); transform: scale(5,6); } 100% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } } @keyframes scaleIn { 0% { opacity: 0; -webkit-transform: scale(1,1); transform: scale(1,1); } 50% { opacity: 1; -webkit-transform: scale(5,6); transform: scale(5,6); } 100% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } } /* ============================================== scaleInMin ============================================== */ .scaleInMin { -webkit-animation-name: scaleInMin; animation-name: scaleInMin; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @-webkit-keyframes scaleInMin { 0% { opacity: 0; -webkit-transform: scale(0,0); transform: scale(0,0); } 50% { opacity: 1; -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); } 100% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } } @keyframes scaleInMin { 0% { opacity: 0; -webkit-transform: scale(0,0); transform: scale(0,0); } 50% { opacity: 1; -webkit-transform: scale(1.1,1.1); transform: scale(1.1,1.1); } 100% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } } /* ============================================== scaleInExit ============================================== */ .scaleInExit { -webkit-animation-name: scaleInExit; animation-name: scaleInExit; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @-webkit-keyframes scaleInExit { 0% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } 100% { opacity: 0; -webkit-transform: scale(5,6); transform: scale(5,6); } } @keyframes scaleInExit { 0% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } 100% { opacity: 0; -webkit-transform: scale(5,6); transform: scale(5,6); } } /* ============================================== scaleInExitBounce ============================================== */ .scaleInExitBounce { -webkit-animation-name: scaleInExitBounce; animation-name: scaleInExitBounce; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @-webkit-keyframes scaleInExitBounce { 0% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } 50% { opacity: 1; -webkit-transform: scale(0.8,0.8); transform: scale(0.8,0.8); } 100% { opacity: 0; -webkit-transform: scale(5,6); transform: scale(5,6); } } @keyframes scaleInExitBounce { 0% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } 50% { opacity: 1; -webkit-transform: scale(0.8,0.8); transform: scale(0.8,0.8); } 100% { opacity: 0; -webkit-transform: scale(5,6); transform: scale(5,6); } } /* ============================================== scaleOut ============================================== */ .scaleOut { -webkit-animation-name: scaleOut; animation-name: scaleOut; -webkit-animation-duration: 0.5s; animation-duration: 0.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @-webkit-keyframes scaleOut { 0% { opacity: 0; -webkit-transform: scale(6,7); transform: scale(6,7); } 100% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } } @keyframes scaleOut { 0% { opacity: 0; -webkit-transform: scale(6,7); transform: scale(6,7); } 100% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } } /* ============================================== scaleOutBounceBounce ============================================== */ .scaleOutBounce { -webkit-animation-name: scaleOutBounce; animation-name: scaleOutBounce; -webkit-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @-webkit-keyframes scaleOutBounce { 0% { opacity: 0; -webkit-transform: scale(6,7); transform: scale(6,7); } 50% { opacity: 1; -webkit-transform: scale(0.5,0.5); transform: scale(0.5,0.5); } 100% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } } @keyframes scaleOutBounce { 0% { opacity: 0; -webkit-transform: scale(6,7); transform: scale(6,7); } 50% { opacity: 1; -webkit-transform: scale(0.5,0.5); transform: scale(0.5,0.5); } 100% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } } /* ============================================== shake Made by Daniel Eden ============================================== */ .shake { -webkit-animation-name: shake; animation-name: shake; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @-webkit-keyframes shake { from, to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } /* ============================================== skew ============================================== */ .skew { -webkit-animation-name: skew; animation-name: skew; -webkit-animation-duration: 0.6s; animation-duration: 0.6s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes skew { 0% { opacity: 0; -webkit-transform: skew(80deg, 40deg); transform: skew(80deg, 40deg); } 100% { opacity: 1; -webkit-transform: skew(0deg, 0deg); transform: skew(0deg, 0deg); } } @keyframes skew { 0% { opacity: 0; -webkit-transform: skew(80deg, 40deg); transform: skew(80deg, 40deg); } 100% { opacity: 1; -webkit-transform: skew(0deg, 0deg); transform: skew(0deg, 0deg); } } /* ======================================================================== slideDown Made by Justin Aguilar CSS3 ANIMATION CHEAT SHEET ======================================================================== */ .slideDown{ animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideDown { 0% { transform: translateY(-100%); } 50%{ transform: translateY(8%); } 65%{ transform: translateY(-4%); } 80%{ transform: translateY(4%); } 95%{ transform: translateY(-2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(-100%); } 50%{ -webkit-transform: translateY(8%); } 65%{ -webkit-transform: translateY(-4%); } 80%{ -webkit-transform: translateY(4%); } 95%{ -webkit-transform: translateY(-2%); } 100% { -webkit-transform: translateY(0%); } } /* ====================================================================== slideUp Made by Justin Aguilar CSS3 ANIMATION CHEAT SHEET ====================================================================== */ .slideUp{ animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { transform: translateY(100%); } 50%{ transform: translateY(-8%); } 65%{ transform: translateY(4%); } 80%{ transform: translateY(-4%); } 95%{ transform: translateY(2%); } 100% { transform: translateY(0%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); } 50%{ -webkit-transform: translateY(-8%); } 65%{ -webkit-transform: translateY(4%); } 80%{ -webkit-transform: translateY(-4%); } 95%{ -webkit-transform: translateY(2%); } 100% { -webkit-transform: translateY(0%); } } /* ======================================================================== slideLeft Made by Justin Aguilar CSS3 ANIMATION CHEAT SHEET ======================================================================== */ .slideLeft{ animation-name: slideLeft; -webkit-animation-name: slideLeft; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft { 0% { transform: translateX(150%); } 50%{ transform: translateX(-8%); } 65%{ transform: translateX(4%); } 80%{ transform: translateX(-4%); } 95%{ transform: translateX(2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(150%); } 50%{ -webkit-transform: translateX(-8%); } 65%{ -webkit-transform: translateX(4%); } 80%{ -webkit-transform: translateX(-4%); } 95%{ -webkit-transform: translateX(2%); } 100% { -webkit-transform: translateX(0%); } } /* ======================================================================= slideRight Made by Justin Aguilar CSS3 ANIMATION CHEAT SHEET ======================================================================= */ .slideRight{ animation-name: slideRight; -webkit-animation-name: slideRight; -ms-animation-name: slideRight; animation-duration: 1s; -webkit-animation-duration: 1s; -ms-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight { 0% { transform: translateX(-150%); } 50%{ transform: translateX(8%); } 65%{ transform: translateX(-4%); } 80%{ transform: translateX(4%); } 95%{ transform: translateX(-2%); } 100% { transform: translateX(0%); } } @-webkit-keyframes slideRight { 0% { -webkit-transform: translateX(-150%); } 50%{ -webkit-transform: translateX(8%); } 65%{ -webkit-transform: translateX(-4%); } 80%{ -webkit-transform: translateX(4%); } 95%{ -webkit-transform: translateX(-2%); } 100% { -webkit-transform: translateX(0%); } } @-ms-keyframes slideRight { 0% { -ms-transform: translateX(-150rem); } 50%{ -ms-transform: translateX(8rem); } 65%{ -ms-transform: translateX(-4rem); } 80%{ -ms-transform: translateX(4rem); } 95%{ -ms-transform: translateX(-2rem); } 100% { -ms-transform: translateX(0rem); } } /* ======================================================================== slideExpandUp Made by Justin Aguilar CSS3 ANIMATION CHEAT SHEET ======================================================================== */ .slideExpandUp{ animation-name: slideExpandUp; -webkit-animation-name: slideExpandUp; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease -out; visibility: visible !important; } @keyframes slideExpandUp { 0% { transform: translateY(100%) scaleX(0.5); } 30%{ transform: translateY(-8%) scaleX(0.5); } 40%{ transform: translateY(2%) scaleX(0.5); } 50%{ transform: translateY(0%) scaleX(1.1); } 60%{ transform: translateY(0%) scaleX(0.9); } 70% { transform: translateY(0%) scaleX(1.05); } 80%{ transform: translateY(0%) scaleX(0.95); } 90% { transform: translateY(0%) scaleX(1.02); } 100%{ transform: translateY(0%) scaleX(1); } } @-webkit-keyframes slideExpandUp { 0% { -webkit-transform: translateY(100%) scaleX(0.5); } 30%{ -webkit-transform: translateY(-8%) scaleX(0.5); } 40%{ -webkit-transform: translateY(2%) scaleX(0.5); } 50%{ -webkit-transform: translateY(0%) scaleX(1.1); } 60%{ -webkit-transform: translateY(0%) scaleX(0.9); } 70% { -webkit-transform: translateY(0%) scaleX(1.05); } 80%{ -webkit-transform: translateY(0%) scaleX(0.95); } 90% { -webkit-transform: translateY(0%) scaleX(1.02); } 100%{ -webkit-transform: translateY(0%) scaleX(1); } } /* SNOWING */ /* originally authored by Brad Knutson */ /* ======================= snow1 ======================= */ .snow1 { width:2500px; height:1570px; background-image: url("skins/snow1.png") ; -webkit-animation: snow1 12s linear 0s infinite normal; -moz-animation: snow1 12s linear 0s infinite normal; -ms-animation: snow1 12s linear 0s infinite normal; animation: snow1 12s linear 0s infinite normal; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes snow1 { 0% {background-position:0px 0px;} 100% {background-position: -300px 300px;} } @-moz-keyframes snow1 { 0% {background-position: 0px 0px;} 100% {background-position: -300px 300px;} } @-webkit-keyframes snow1 { 0% {background-position: 0px 0px;} 100% {background-position:-300px 300px;} } @-ms-keyframes snow1 { 0% {background-position: 0px 0px;} 100% {background-position: -300px 300px;} } /* ============================================== snow2 ============================================== */ .snow2 { width:2500px; height:1570px; background-image: url("skins/snow2.png") ; -webkit-animation: snow2 23s linear 0s infinite normal; -moz-animation: snow2 23s linear 0s infinite normal; -ms-animation: snow2 23s linear 0s infinite normal; animation: snow2 23s linear 0s infinite normal; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes snow2 { 0% {background-position: 0px 0px;} 100% {background-position: 400px 400px;} } @-moz-keyframes snow2 { 0% {background-position:0px 0px;} 100% {background-position: 400px 400px;} } @-webkit-keyframes snow2 { 0% {background-position: 0px 0px;} 100% {background-position: 400px 400px;} } @-ms-keyframes snow2 { 0% {background-position: 0px 0px;} 100% {background-position: 400px 400px;} } /* ============================================== snow3 ============================================== */ .snow3 { width:2500px; height:1570px; background-image: url("skins/snow3.png") ; -webkit-animation: snow3 18s linear 0s infinite normal; -moz-animation: snow3 18s linear 0s infinite normal; -ms-animation: snow3 18s linear 0s infinite normal; animation: snow3 18s linear 0s infinite normal; -moz-animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes snow3 { 0% {background-position: 0px 0px;} 100% {background-position: 500px 1000px;} } @-moz-keyframes snow3 { 0% {background-position:0px 0px;} 100% {background-position: 500px 1000px;} } @-webkit-keyframes snow3 { 0% {background-position: 0px 0px;} 100% {background-position: 500px 1000px;} } @-ms-keyframes snow3 { 0% {background-position: 0px 0px;} 100% {background-position: 500px 1000px;} } /* ============================================== spaceInUp Made by Christian Pucci ============================================== */ .spaceInUp { -webkit-animation-name: spaceInUp; animation-name: spaceInUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes spaceInUp { 0% { opacity: 0; -webkit-transform-origin: 50% 0%; -webkit-transform: scale(.2) translate(0%, -200%); } 100% { opacity: 1; -webkit-transform-origin: 50% 0%; -webkit-transform: scale(1) translate(0%, 0%); } } @keyframes spaceInUp { 0% { opacity: 0; transform-origin: 50% 0%; transform: scale(.2) translate(0%, -200%); } 100% { opacity: 1; transform-origin: 50% 0%; transform: scale(1) translate(0%, 0%); } } /* ============================================== spaceInDown Made by Christian Pucci ============================================== */ .spaceInDown { -webkit-animation-name: spaceInDown; animation-name: spaceInDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes spaceInDown { 0% { opacity: 0; -webkit-transform-origin: 50% 100%; -webkit-transform: scale(.2) translate(0%, 200%); } 100% { opacity: 1; -webkit-transform-origin: 50% 100%; -webkit-transform: scale(1) translate(0%, 0%); } } @keyframes spaceInDown { 0% { opacity: 0; transform-origin: 50% 100%; transform: scale(.2) translate(0%, 200%); } 100% { opacity: 1; transform-origin: 50% 100%; transform: scale(1) translate(0%, 0%); } } /* ============================================== spaceInLeft Made by Christian Pucci ============================================== */ .spaceInLeft { -webkit-animation-name: spaceInLeft; animation-name: spaceInLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes spaceInLeft { 0% { opacity: 0; -webkit-transform-origin: 0% 50%; -webkit-transform: scale(.2) translate(-200%, 0%); } 100% { opacity: 1; -webkit-transform-origin: 0% 50%; -webkit-transform: scale(1) translate(0%, 0%); } } @keyframes spaceInLeft { 0% { opacity: 0; transform-origin: 0% 50%; transform: scale(.2) translate(-200%, 0%); } 100% { opacity: 1; transform-origin: 0% 50%; transform: scale(1) translate(0%, 0%); } } /* ============================================== spaceInRight Made by Christian Pucci ============================================== */ .spaceInRight { -webkit-animation-name: spaceInRight; animation-name: spaceInRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes spaceInRight { 0% { opacity: 0; -webkit-transform-origin: 100% 50%; -webkit-transform: scale(.2) translate(200%, 0%); } 100% { opacity: 1; -webkit-transform-origin: 100% 50%; -webkit-transform: scale(1) translate(0%, 0%); } } @keyframes spaceInRight { 0% { opacity: 0; transform-origin: 100% 50%; transform: scale(.2) translate(200%, 0%); } 100% { opacity: 1; transform-origin: 100% 50%; transform: scale(1) translate(0%, 0%); } } /* ============================================== spaceOutUp Made by Christian Pucci ============================================== */ .spaceOutUp { -webkit-animation-name: spaceOutUp; animation-name: spaceOutUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes spaceOutUp { 0% { opacity: 1; -webkit-transform-origin: 50% 0%; -webkit-transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; -webkit-transform-origin: 50% 0%; -webkit-transform: scale(.2) translate(0%, -200%); } } @keyframes spaceOutUp { 0% { opacity: 1; transform-origin: 50% 0%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 50% 0%; transform: scale(.2) translate(0%, -200%); } } /* ============================================== spaceOutDown Made by Christian Pucci ============================================== */ .spaceOutDown { -webkit-animation-name: spaceOutDown; animation-name: spaceOutDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes spaceOutDown { 0% { opacity: 1; -webkit-transform-origin: 50% 100%; -webkit-transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; -webkit-transform-origin: 50% 100%; -webkit-transform: scale(.2) translate(0%, 200%); } } @keyframes spaceOutDown { 0% { opacity: 1; transform-origin: 50% 100%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 50% 100%; transform: scale(.2) translate(0%, 200%); } } /* ============================================== spaceOutLeft Made by Christian Pucci ============================================== */ .spaceOutLeft { -webkit-animation-name: spaceOutLeft; animation-name: spaceOutLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes spaceOutLeft { 0% { opacity: 1; -webkit-transform-origin: 0% 50%; -webkit-transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; -webkit-transform-origin: 0% 50%; -webkit-transform: scale(.2) translate(-200%, 0%); } } @keyframes spaceOutLeft { 0% { opacity: 1; transform-origin: 0% 50%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 0% 50%; transform: scale(.2) translate(-200%, 0%); } } /* ============================================== spaceOutRight Made by Christian Pucci ============================================== */ .spaceOutRight { -webkit-animation-name: spaceOutRight; animation-name: spaceOutRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes spaceOutRight { 0% { opacity: 1; -webkit-transform-origin: 100% 50%; -webkit-transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; -webkit-transform-origin: 100% 50%; -webkit-transform: scale(.2) translate(200%, 0%); } } @keyframes spaceOutRight { 0% { opacity: 1; transform-origin: 100% 50%; transform: scale(1) translate(0%, 0%); } 100% { opacity: 0; transform-origin: 100% 50%; transform: scale(.2) translate(200%, 0%); } } /* ====================================================== stretchLeft Made by Justin Aguilar CSS3 ANIMATION CHEAT SHEET ====================================================== */ .stretchLeft{ animation-name: stretchLeft; -webkit-animation-name: stretchLeft; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -webkit-transform-origin: 100% 0%; } @keyframes stretchLeft { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchLeft { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /* ======================================================= stretchRight by Justin Aguilar CSS3 ANIMATION CHEAT SHEET ======================================================= */ .stretchRight{ animation-name: stretchRight; -webkit-animation-name: stretchRight; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -webkit-transform-origin: 0% 0%; } @keyframes stretchRight { 0% { transform: scaleX(0.3); } 40% { transform: scaleX(1.02); } 60% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(0.98); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchRight { 0% { -webkit-transform: scaleX(0.3); } 40% { -webkit-transform: scaleX(1.02); } 60% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(0.98); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } } /* ============================================== swap Made by Christian Pucci ============================================== */ .swap { -webkit-animation-name: swap; animation-name: swap; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes swap { 0% { opacity: 0; -webkit-transform-origin: 0 100%; -webkit-transform: scale(0, 0) translate(-700px, 0px); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; -webkit-transform: scale(1, 1) translate(0px, 0px);; } } @keyframes swap { 0% { opacity: 0; transform-origin: 0 100%; transform: scale(0, 0) translate(-700px, 0px); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1, 1) translate(0px, 0px); } } /* ============================================== swashIn Made by Christian Pucci ============================================== */ .swashIn { -webkit-animation-name: swashIn; animation-name: swashIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes swashIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0, 0); } 90% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0.9, 0.9); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1, 1); } } @keyframes swashIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); } 90% { opacity: 1; transform-origin: 50% 50%; transform: scale(0.9, 0.9); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); } } /* ============================================== swashOut Made by Christian Pucci ============================================== */ .swashOut { -webkit-animation-name: swashOut; animation-name: swashOut; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes swashOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1, 1); transform: scale(1, 1); } 80% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0.9, 0.9); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(0, 0); } } @keyframes swashOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); } 80% { opacity: 1; transform-origin: 50% 50%; transform: scale(0.9, 0.9); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(0, 0); } } /* ============================================== swing Made by Daniel Eden ============================================== */ .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } @-webkit-keyframes swing { 20% { -webkit-transform: rotate3d(0, 0, 1, 15deg); transform: rotate3d(0, 0, 1, 15deg); } 40% { -webkit-transform: rotate3d(0, 0, 1, -10deg); transform: rotate3d(0, 0, 1, -10deg); } 60% { -webkit-transform: rotate3d(0, 0, 1, 5deg); transform: rotate3d(0, 0, 1, 5deg); } 80% { -webkit-transform: rotate3d(0, 0, 1, -5deg); transform: rotate3d(0, 0, 1, -5deg); } to { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } } /* ============================================== tada Made by Daniel Eden ============================================== */ .tada { -webkit-animation-name: tada; animation-name: tada; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes tada { from { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 10%, 20% { -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } /* originally authored by Lea Verou */ /* ============================================== typing_and_erasing ============================================== */ .typing_and_erasing { padding:0; width:auto; white-space:nowrap; overflow:hidden; box-sizing: border-box; -webkit-animation: typing_and_erasing 4s steps(30, end), /* # of steps = # of characters */ blink1 1s 5, blink2 0s; -moz-animation: typing_and_erasing 4s steps(30, end), /* # of steps = # of characters */ blink1 1s 5, blink2 0s; -ms-animation: typing_and_erasing 4s steps(30, end), /* # of steps = # of characters */ blink1 1s 5, blink2 0s; -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */ animation-delay: 1s; -ms-animation-delay: 1s; -webkit-animation-fill-mode: both; /* Chrome, Safari, Opera */ animation-fill-mode:both; -ms-animation-fill-mode:both; } @-webkit-keyframes typing_and_erasing { from { width:0;} 50% {width:3em;} 60% {width:3em;} 70% {width:3em;} 80% {width:3em;} to { width: 0; border-bottom:0px solid transparent;} } @-moz-keyframes typing_and_erasing { from { width: 0;} 50% {width:3em;} 60% {width:3em;} 70% {width:3em;} 80% {width:3em;} to { width: 0; border-bottom:0px solid transparent;} } @-ms-keyframes typing_and_erasing { from { width: 0;} 50% {width:3em;} 60% {width:3em;} 70% {width:3em;} 80% {width:3em;} to { width: 0; border-bottom:0px solid transparent;} } @-webkit-keyframes blink1 { 0% {border-right: 3px solid transparent;} 50% {border-right: 3px solid #FFFFFF;} 100% {border-right: 3px solid transparent; } } @-moz-keyframes blink1 { from, to{border-right:3px solid transparent;} 50% {border-right:3px solid #FFFFFF;} 100% {border-right: 3px solid transparent; } } @-ms-keyframes blink1 { from, to{border-right:3px solid transparent;} 50% {border-right:3px solid #FFFFFF;} 100% {border-right: 3px solid transparent; } } @-webkit-keyframes blink2 { from, to {border-bottom: 3px solid #ffffff;} } @-moz-keyframes blink2 { from, to {border-bottom: 3px solid #ffffff;} } @-webkit-keyframes blink2 { from, to {border-bottom: 3px solid #ffffff;} } @-ms-keyframes blink2 { from, to {border-bottom: 3px solid #ffffff;} } /* originally authored by Lea Verou */ /* ============================================== typing ============================================== */ .typing { padding:0; width:auto; white-space:nowrap; overflow:hidden; box-sizing: border-box; -webkit-animation: typing 4s steps(30, end), /* # of steps = # of characters */ blink3 1s infinite, blink4 0s; -moz-animation: typing 4s steps(30, end), /* # of steps = # of characters */ blink3 1s infinite, blink4 0s; -ms-animation: typing 4s steps(30, end), /* # of steps = # of characters */ blink3 1s infinite, blink4 0s; -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */ animation-delay: 1s; -ms-animation-delay: 1s; -webkit-animation-fill-mode: both; /* Chrome, Safari, Opera */ animation-fill-mode: both; -ms-animation-fill-mode: both; } /**/ @-webkit-keyframes blink4 { from, to {border-bottom: 3px solid #ffffff;} } @-moz-keyframes blink4 { from, to {border-bottom: 3px solid #ffffff;} } @-ms-keyframes blink4 { from, to {border-bottom: 3px solid #ffffff;} } @-webkit-keyframes typing { from { width:0;} 50% {width:3em;} 60% {width:3em;} 70% {width:3em;} 80% {width:3em;} to { width: 3em; border-bottom:0px solid transparent;} } @-moz-keyframes typing { from { width: 0;} 50% {width:3em;} 60% {width:3em;} 70% {width:3em;} 80% {width:3em;} to { width: 3em; border-bottom:0px solid transparent;} } @-ms-keyframes typing { from { width: 0;} 50% {width:3em;} 60% {width:3em;} 70% {width:3em;} 80% {width:3em;} to { width: 3em; border-bottom:0px solid transparent;} } @-webkit-keyframes blink3 { from, to {border-right: 3px solid transparent;} 50% { border-right: 3px solid #FFFFFF;} } @-moz-keyframes blink3 { from, to {border-right:3px solid transparent;} 50% { border-right:3px solid #FFFFFF;} } @-ms-keyframes blink3 { from, to {border-right:3px solid transparent;} 50% { border-right:3px solid #FFFFFF;} } /* ============================================== tinLeftIn Made by Christian Pucci ============================================== */ .tinLeftIn { -webkit-animation-name: tinLeftIn; animation-name: tinLeftIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes tinLeftIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); } } @keyframes tinLeftIn { 0% { opacity: 0; transform: scale(1, 1) translateX(-900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateX(0); } } /* ============================================== tinRightIn Made by Christian Pucci ============================================== */ .tinRightIn { -webkit-animation-name: tinRightIn; animation-name: tinRightIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes tinRightIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); } } @keyframes tinRightIn { 0% { opacity: 0; transform: scale(1, 1) translateX(900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateX(0); } } /* ============================================== tinUpIn Made by Christian Pucci ============================================== */ .tinUpIn { -webkit-animation-name: tinUpIn; animation-name: tinUpIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes tinUpIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); } } @keyframes tinUpIn { 0% { opacity: 0; transform: scale(1, 1) translateY(-900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateY(0); } } /* ============================================== tinDownIn Made by Christian Pucci ============================================== */ .tinDownIn { -webkit-animation-name: tinDownIn; animation-name: tinDownIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes tinDownIn { 0% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); } } @keyframes tinDownIn { 0% { opacity: 0; transform: scale(1, 1) translateY(900%); } 50%, 70%, 90% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 60%, 80%, 100% { opacity: 1; transform: scale(1, 1) translateY(0); } } /* ============================================== tinLeftOut Made by Christian Pucci ============================================== */ .tinLeftOut { -webkit-animation-name: tinLeftOut; animation-name: tinLeftOut; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes tinLeftOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateX(-900%); } } @keyframes tinLeftOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; transform: scale(1, 1) translateX(-900%); } } /* ============================================== tinRightOut Made by Christian Pucci ============================================== */ .tinRightOut { -webkit-animation-name: tinRightOut; animation-name: tinRightOut; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes tinRightOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateX(900%); } } @keyframes tinRightOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateX(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateX(0); } 100% { opacity: 0; transform: scale(1, 1) translateX(900%); } } /* ============================================== tinUpOut Made by Christian Pucci ============================================== */ .tinUpOut { -webkit-animation-name: tinUpOut; animation-name: tinUpOut; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes tinUpOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateY(-900%); } } @keyframes tinUpOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; transform: scale(1, 1) translateY(-900%); } } /* ============================================== tinDownOut Made by Christian Pucci ============================================== */ .tinDownOut { -webkit-animation-name: tinDownOut; animation-name: tinDownOut; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes tinDownOut { 0%, 20%, 40%, 50% { opacity: 1; -webkit-transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; -webkit-transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; -webkit-transform: scale(1, 1) translateY(900%); } } @keyframes tinDownOut { 0%, 20%, 40%, 50% { opacity: 1; transform: scale(1, 1) translateY(0); } 10%, 30% { opacity: 1; transform: scale(1.1, 1.1) translateY(0); } 100% { opacity: 0; transform: scale(1, 1) translateY(900%); } } /* =============================================================== tossing Made by Justin Aguilar CSS3 ANIMATION CHEAT SHEET =============================================================== */ .tossing{ animation-name: tossing; -webkit-animation-name: tossing; animation-duration: 2.5s; -webkit-animation-duration: 2.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes tossing { 0% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } 100% { transform: rotate(-4deg); } } @-webkit-keyframes tossing { 0% { -webkit-transform: rotate(-4deg); } 50% { -webkit-transform: rotate(4deg); } 100% { -webkit-transform: rotate(-4deg); } } /* ============================================== twisterInUp Made by Christian Pucci ============================================== */ .twisterInUp { -webkit-animation-name: twisterInUp; animation-name: twisterInUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes twisterInUp { 0% { opacity: 0; -webkit-transform-origin: 100% 0; -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%); } 30% { -webkit-transform-origin: 100% 0; -webkit-transform: scale(0, 0) rotate(360deg) translateY(100%); } 100% { opacity: 1; -webkit-transform-origin: 0 0; -webkit-transform: scale(1, 1) rotate(0deg) translateY(0); } } @keyframes twisterInUp { 0% { opacity: 0; transform-origin: 100% 0; transform: scale(0, 0) rotate(360deg) translateY(100%); } 30% { transform-origin: 100% 0; transform: scale(0, 0) rotate(360deg) translateY(100%); } 100% { opacity: 1; transform-origin: 0 0; transform: scale(1, 1) rotate(0deg) translateY(0); } } /* ============================================== twisterInDown Made by Christian Pucci ============================================== */ .twisterInDown { -webkit-animation-name: twisterInDown; animation-name: twisterInDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes twisterInDown { 0% { opacity: 0; -webkit-transform-origin: 0 100%; -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%); } 30% { -webkit-transform-origin: 0 100%; -webkit-transform: scale(0, 0) rotate(360deg) translateY(-100%); } 100% { opacity: 1; -webkit-transform-origin: 100% 100%; -webkit-transform: scale(1, 1) rotate(0deg) translateY(0%); } } @keyframes twisterInDown { 0% { opacity: 0; transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 30% { transform-origin: 0 100%; transform: scale(0, 0) rotate(360deg) translateY(-100%); } 100% { opacity: 1; transform-origin: 100% 100%; transform: scale(1, 1) rotate(0deg) translateY(0%); } } /* ============================================== vanishIn Made by Christian Pucci ============================================== */ .vanishIn { -webkit-animation-name: vanishIn; animation-name: vanishIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes vanishIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -webkit-filter: blur(90px); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -webkit-filter: blur(0px); } } @keyframes vanishIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); -webkit-filter: blur(90px); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); -webkit-filter: blur(0px); } } /* ============================================== vanishOut Made by Christian Pucci ============================================== */ .vanishOut { -webkit-animation-name: vanishOut; animation-name: vanishOut; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes vanishOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1, 1); -webkit-filter: blur(0px); } 100% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(2, 2); -webkit-filter: blur(20px); } } @keyframes vanishOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1, 1); -webkit-filter: blur(0px); } 100% { opacity: 0; transform-origin: 50% 50%; transform: scale(2, 2); -webkit-filter: blur(20px); } } /* originally authored by Nick Pettit*/ /* ============================================== wobble Daniel Eden ============================================== */ .wobble { -webkit-animation-name: wobble; animation-name: wobble; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } @-webkit-keyframes wobble { from { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { -webkit-transform: none; transform: none; } } /* ============================================== zoomIn Made by Daniel Eden ============================================== */ .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } @-webkit-keyframes zoomIn { from { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } } /* ============================================== zoomOut Made by Daniel Eden ============================================== */ .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { opacity: 0; } } @-webkit-keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } to { opacity: 0; } } /* ============================================== zoomOutSlowly Made by Daniel Eden ============================================== */ .zoomOutSlowly { -webkit-animation-name: zoomOutSlowly; animation-name: zoomOutSlowly; -webkit-animation-duration: 20s; animation-duration: 20s; -webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */ animation-timing-function: linear; -moz-animation-timing-function: linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes zoomOutSlowly { from { opacity: 1; } to { opacity: 1; -webkit-transform: scale(.8) rotate(0.01deg); -moz-transform: scale(.8) rotate(0.01deg); transform: scale(.8) rotate(0.01deg); -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */ transform-style: preserve-3d; /* Chrome, Safari, Opera */ -moz-transform-style: preserve-3d; /* Chrome, Safari, Opera */ } } @-webkit-keyframes zoomOutSlowly { from { opacity: 1; } to { opacity: 1; -webkit-transform: scale(.8) rotate(0.01deg); -moz-transform: scale(.8) rotate(0.01deg); transform: scale(.8) rotate(0.01deg); -webkit-transform-style: preserve-3d; /* Chrome, Safari, Opera */ transform-style: preserve-3d; /* Chrome, Safari, Opera */ -moz-transform-style: preserve-3d; /* Chrome, Safari, Opera */ } } /* ============================================== zoomInLeft Made by Daniel Eden ============================================== */ .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @-webkit-keyframes zoomInLeft { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } /* ============================================== zoomInRight Made by Daniel Eden ============================================== */ .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @-webkit-keyframes zoomInRight { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } /* ============================================== zoomInUp Made by Daniel Eden ============================================== */ .zoomInUp { -webkit-animation-name: zoomInUp; animation-name: zoomInUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @-webkit-keyframes zoomInUp { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } /* ============================================== zoomInDown Made by Daniel Eden ============================================== */ .zoomInDown { -webkit-animation-name: zoomInDown; animation-name: zoomInDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @-webkit-keyframes zoomInDown { from { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } /* ============================================== zoomOutLeft Made by Daniel Eden ============================================== */ .zoomOutLeft { -webkit-animation-name: zoomOutLeft; animation-name: zoomOutLeft; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } @-webkit-keyframes zoomOutLeft { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(-2000px, 0, 0); transform: scale(.1) translate3d(-2000px, 0, 0); -webkit-transform-origin: left center; transform-origin: left center; } } /* ============================================== zoomOutRight Made by Daniel Eden ============================================== */ .zoomOutRight { -webkit-animation-name: zoomOutRight; animation-name: zoomOutRight; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } @-webkit-keyframes zoomOutRight { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); } to { opacity: 0; -webkit-transform: scale(.1) translate3d(2000px, 0, 0); transform: scale(.1) translate3d(2000px, 0, 0); -webkit-transform-origin: right center; transform-origin: right center; } } /* ============================================== zoomOutUp Made by Daniel Eden ============================================== */ .zoomOutUp { -webkit-animation-name: zoomOutUp; animation-name: zoomOutUp; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @-webkit-keyframes zoomOutUp { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } /* ============================================== zoomOutDown Made by Daniel Eden ============================================== */ .zoomOutDown { -webkit-animation-name: zoomOutDown; animation-name: zoomOutDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @-webkit-keyframes zoomOutDown { 40% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } to { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } /***********Other Styles************/ /* originally authored by Zoltan "Du Lac" Hawryluk */ /* ============================================== planeFW ============================================== */ .planeFW { position: absolute; /* CSS Please is your friend for ensuring cross browser syntax */ -webkit-animation: planeFW 10s linear infinite; /* Chrome, Safari 5 */ -moz-animation: planeFW 10s linear infinite; /* Firefox 5-15 */ -o-animation: planeFW 10s linear infinite; /* Opera 12 */ animation: planeFW 10s linear infinite; /* Chrome, Firefox 16 , IE 10 , Safari 5 */ } @-webkit-keyframes planeFW { from { -webkit-transform: rotate(0deg) translateX(25em); } to { -webkit-transform: rotate(360deg) translateX(25em); } } @-moz-keyframes planeFW { from { -moz-transform: rotate(0deg) translateX(25em); } to { -moz-transform: rotate(360deg) translateX(25em); } } @-o-keyframes planeFW { from { -o-transform: rotate(0deg) translateX(25em); } to { -o-transform: rotate(360deg) translateX(25em); } } @keyframes planeFW { from { transform: rotate(0deg) translateX(25em); } to { transform: rotate(360deg) translateX(25em); } } .planeFWFixed { position: absolute; /* CSS Please is your friend for ensuring cross browser syntax */ -webkit-animation: planeFWFixed 10s linear infinite; /* Chrome, Safari 5 */ -moz-animation: planeFWFixed 10s linear infinite; /* Firefox 5-15 */ -o-animation: planeFWFixed 10s linear infinite; /* Opera 12 */ animation: planeFWFixed 10s linear infinite; /* Chrome, Firefox 16 , IE 10 , Safari 5 */ } @-webkit-keyframes planeFWFixed { from { -webkit-transform: rotate(0deg) translateX(15em); } to { -webkit-transform: rotate(360deg) translateX(15em); } } @-moz-keyframes planeFWFixed { from { -moz-transform: rotate(0deg) translateX(15em); } to { -moz-transform: rotate(360deg) translateX(15em); } } @-o-keyframes planeFWFixed { from { -o-transform: rotate(0deg) translateX(15em); } to { -o-transform: rotate(360deg) translateX(15em); } } @keyframes planeFWFixed { from { transform: rotate(0deg) translateX(15em); } to { transform: rotate(360deg) translateX(15em); } } .planeBW { position: absolute; /* CSS Please is your friend for ensuring cross browser syntax */ -webkit-animation: planeBW 9s linear infinite; /* Chrome, Safari 5 */ -moz-animation: planeBW 9s linear infinite; /* Firefox 5-15 */ -o-animation: planeBW 9s linear infinite; /* Opera 12 */ animation: planeBW 9s linear infinite; /* Chrome, Firefox 16 , IE 10 , Safari 5 */ } @-webkit-keyframes planeBW { from { -webkit-transform: rotate(0deg) translateX(25em); } to { -webkit-transform: rotate(-360deg) translateX(25em); } } @-moz-keyframes planeBW { from { -moz-transform: rotate(0deg) translateX(25em); } to { -moz-transform: rotate(-360deg) translateX(25em); } } @-o-keyframes planeBW { from { -o-transform: rotate(0deg) translateX(25em); } to { -o-transform: rotate(-360deg) translateX(25em); } } @keyframes planeBW { from { transform: rotate(0deg) translateX(25em); } to { transform: rotate(-360deg) translateX(25em); } } .planeBWFixed { position: absolute; /* CSS Please is your friend for ensuring cross browser syntax */ -webkit-animation: planeBWFixed 9s linear infinite; /* Chrome, Safari 5 */ -moz-animation: planeBWFixed 9s linear infinite; /* Firefox 5-15 */ -o-animation: planeBWFixed 9s linear infinite; /* Opera 12 */ animation: planeBWFixed 9s linear infinite; /* Chrome, Firefox 16 , IE 10 , Safari 5 */ } @-webkit-keyframes planeBWFixed { from { -webkit-transform: rotate(0deg) translateX(15em); } to { -webkit-transform: rotate(-360deg) translateX(15em); } } @-moz-keyframes planeBWFixed { from { -moz-transform: rotate(0deg) translateX(15em); } to { -moz-transform: rotate(-360deg) translateX(15em); } } @-o-keyframes planeBWFixed { from { -o-transform: rotate(0deg) translateX(15em); } to { -o-transform: rotate(-360deg) translateX(15em); } } @keyframes planeBWFixed { from { transform: rotate(0deg) translateX(15em); } to { transform: rotate(-360deg) translateX(15em); } } .planeBW2 { position: absolute; /* CSS Please is your friend for ensuring cross browser syntax */ -webkit-animation: planeBW2 15s linear infinite; /* Chrome, Safari 5 */ -moz-animation: planeBW2 15s linear infinite; /* Firefox 5-15 */ -o-animation: planeBW2 15s linear infinite; /* Opera 12 */ animation: planeBW2 15s linear infinite; /* Chrome, Firefox 16 , IE 10 , Safari 5 */ } @-webkit-keyframes planeBW2 { from { -webkit-transform: rotate(0deg) translateX(25em); } to { -webkit-transform: rotate(-360deg) translateX(25em); } } @-moz-keyframes planeBW2 { from { -moz-transform: rotate(0deg) translateX(25em); } to { -moz-transform: rotate(-360deg) translateX(25em); } } @-o-keyframes planeBW2 { from { -o-transform: rotate(0deg) translateX(25em); } to { -o-transform: rotate(-360deg) translateX(25em); } } @keyframes planeBW2 { from { transform: rotate(0deg) translateX(25em); } to { transform: rotate(-360deg) translateX(25em); } } /* ============================================== magnifyingBounce ============================================== */ .magnifyingBounce{ -webkit-animation-name: magnifyingBounce; animation-name: magnifyingBounce; -webkit-animation-duration: 0.4s; animation-duration: 0.4s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-timing-function: ease; -webkit-animation-timing-function: ease; } @-webkit-keyframes magnifyingBounce{ 0% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } 25% { opacity: 1; -webkit-transform: scale(1.4,1.4); transform: scale(1.4,1.4); } 50% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } 75% { opacity: 1; -webkit-transform: scale(1.4,1.4); transform: scale(1.4,1.4); } 100% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } } @keyframes magnifyingBounce{ 0% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } 25% { opacity: 1; -webkit-transform: scale(1.4,1.4); transform: scale(1.4,1.4); } 50% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } 75% { opacity: 1; -webkit-transform: scale(1.4,1.4); transform: scale(1.4,1.4); } 100% { opacity: 1; -webkit-transform: scale(1,1); transform: scale(1,1); } } /* ============================================== stamp ============================================== */ .stamp { width:auto; height:auto; padding: 0.22em 0.1em 0.8em 0.1em; border-radius: 0.15em; -moz-border-radius: 0.15em; -webkit-border-radius: 0.15em; -ms-border-radius: 0.15em; -o-border-radius: 0.15em; -webkit-animation-name: stamp; animation-name: stamp; -webkit-animation-duration: 0.2s; animation-duration: 0.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes stamp { 0% { opacity: 1; -webkit-transform: scale(5,6) rotate(-10deg); transform: scale(5,6) rotate(-10deg); } 100% { opacity: 1; -webkit-transform: scale(1,1) rotate(-10deg); transform: scale(1,1) rotate(-10deg); } } @keyframes stamp { 0% { opacity: 1; -webkit-transform: scale(5,6) rotate(-10deg); transform: scale(5,6) rotate(-10deg); } 100% { opacity: 1; -webkit-transform: scale(1,1) rotate(-10deg); transform: scale(1,1) rotate(-10deg); } } /* ============================================== returnsToZero ============================================== */ .returnsToZero { width:auto; height:auto; padding: 0.22em 0.1em 0.8em 0.1em; -webkit-animation-name: returnsToZero; animation-name: returnsToZero; -webkit-animation-delay: 3s; /* Chrome, Safari, Opera */ animation-delay: 3s; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes returnsToZero { 0% { opacity: 1; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 100% { opacity: 1; -webkit-transform: rotate(0deg); transform:rotate(0deg); } } @keyframes returnsToZero { 0% { opacity: 1; -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 100% { opacity: 1; -webkit-transform: rotate(0deg); transform: rotate(0deg); } } /* =========================================================== pulse by Clóvis Neto =========================================================== */ .pulse { -webkit-animation: pulse infinite alternate linear 0.8s; -moz-animation: pulse infinite alternate linear 0.8s; -ms-animation: pulse infinite alternate linear 0.8s; -o-animation: pulse infinite alternate linear 0.8s; animation: pulse infinite alternate linear 0.8s; opacity: 1 !important; visibility: visible !important; } @keyframes pulse { 0% { transform:scale(1,1); } 100% { transform:scale(2,2); } } @-webkit-keyframes pulse { 0% { -webkit-transform:scale(1,1); } 100% { -webkit-transform:scale(2,2); } } /* =============================================== pullLeftBoxRegularRZ =============================================== */ .pullLeftBoxRegularRZ{ width:1px; height: 500px; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; animation-name: pullLeftBoxRegular; -webkit-animation-name: pullLeftBoxRegular; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; -webkit-animation-fill-mode: both; animation-fill-mode: both; transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; } @keyframes pullLeftBoxRegularRZ{ 0% { transform: scaleX(0); } 100% { transform: scaleX(410); } } @-webkit-keyframes pullLeftBoxRegularRZ{ 0% { -webkit-transform: scaleX(0); } 100% { -webkit-transform: scaleX(410); } } .lbg1_bgk { width:410px; height:500px; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; padding:0px; font-size:14px; line-height:0px; margin:0px; } .slideBox_RightFromLeft { width:54em; max-width:54em; height:610px; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; animation-name: slideBox_RightFromLeft; -webkit-animation-name: slideBox_RightFromLeft; transform-origin: left; -ms-transform-origin: left; -webkit-transform-origin: left; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: linear; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slideBox_RightFromLeft { 0% { transform:translateX(-100%); } 100% { transform:translateX(0%); } } @-webkit-keyframes slideBox_RightFromLeft { 0% { -webkit-transform:translateX(-100%); } 100% { -webkit-transform:translateX(0%); } } .slideBox_LeftFromRight { width:54em; max-width:54em; height:610px; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; animation-name: slideBox_LeftFromRight; -webkit-animation-name: slideBox_LeftFromRight; transform-origin: right; -ms-transform-origin: right; -webkit-transform-origin: right; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: linear; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slideBox_LeftFromRight { 0% { transform:translateX(100%); } 100% { transform:translateX(0%); } } @-webkit-keyframes slideBox_LeftFromRight { 0% { -webkit-transform:translateX(100%); } 100% { -webkit-transform:translateX(0%); } } .slideBox_RightFromLeft_min { width:30em; max-width:30em; height:500px; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; animation-name: slideBox_RightFromLeft_min; -webkit-animation-name: slideBox_RightFromLeft_min; transform-origin: left; -ms-transform-origin: left; -webkit-transform-origin: left; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: linear; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slideBox_RightFromLeft_min { 0% { transform:translateX(-100%); } 100% { transform:translateX(0%); } } @-webkit-keyframes slideBox_RightFromLeft_min { 0% { -webkit-transform:translateX(-100%); } 100% { -webkit-transform:translateX(0%); } } .slideBox_LeftFromRight_min { width:30em; max-width:30em; height:500px; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; animation-name: slideBox_LeftFromRight_min; -webkit-animation-name: slideBox_LeftFromRight_min; transform-origin: right; -ms-transform-origin: right; -webkit-transform-origin: right; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: linear; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slideBox_LeftFromRight_min { 0% { transform:translateX(100%); } 100% { transform:translateX(0%); } } @-webkit-keyframes slideBox_LeftFromRight_min { 0% { -webkit-transform:translateX(100%); } 100% { -webkit-transform:translateX(0%); } } .slideBox_TopFromBottom { width:36em; max-width:36em; height:47em; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; animation-name: slideBox_TopFromBottom; -webkit-animation-name: slideBox_TopFromBottom; transform-origin: bottom -ms-transform-origin: bottom; -webkit-transform-origin: bottom; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: linear; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slideBox_TopFromBottom { 0% { transform:translateY(100%); } 100% { transform:translateY(0%); } } @-webkit-keyframes slideBox_TopFromBottom { 0% { -webkit-transform:translateY(100%); } 100% { -webkit-transform:translateY(0%); } } .slideBox_BottomFromTop { width:36em; max-width:36em; height:47em; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; animation-name: slideBox_BottomFromTop; -webkit-animation-name: slideBox_BottomFromTop; transform-origin: top; -ms-transform-origin: top; -webkit-transform-origin: top; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: linear; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slideBox_BottomFromTop { 0% { transform:translateY(-100%); } 100% { transform:translateY(0%); } } @-webkit-keyframes slideBox_BottomFromTop { 0% { -webkit-transform:translateY(-100%); } 100% { -webkit-transform:translateY(0%); } } .slideBox_TopFromBottom_min { width:28em; max-width:28em; height:47em; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; animation-name: slideBox_TopFromBottom_min; -webkit-animation-name: slideBox_TopFromBottom_min; transform-origin: bottom -ms-transform-origin: bottom; -webkit-transform-origin: bottom; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: linear; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slideBox_TopFromBottom_min { 0% { transform:translateY(100%); } 100% { transform:translateY(0%); } } @-webkit-keyframes slideBox_TopFromBottom_min { 0% { -webkit-transform:translateY(100%); } 100% { -webkit-transform:translateY(0%); } } .slideBox_BottomFromTop_min { width:28em; max-width:28em; height:47em; filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; animation-name: slideBox_BottomFromTop_min; -webkit-animation-name: slideBox_BottomFromTop_min; transform-origin: top; -ms-transform-origin: top; -webkit-transform-origin: top; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: linear; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slideBox_BottomFromTop_min { 0% { transform:translateY(-100%); } 100% { transform:translateY(0%); } } @-webkit-keyframes slideBox_BottomFromTop_min { 0% { -webkit-transform:translateY(-100%); } 100% { -webkit-transform:translateY(0%); } } .slideBox_TopFromBottom_full{ width:2500px; height:10em; max-height:10em; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; animation-name: slideBox_TopFromBottom_full; -webkit-animation-name: slideBox_TopFromBottom_full; transform-origin: bottom -ms-transform-origin: bottom; -webkit-transform-origin: bottom; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: linear; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slideBox_TopFromBottom_full { 0% { transform:translateY(100%); } 100% { transform:translateY(0%); } } @-webkit-keyframes slideBox_TopFromBottom_full { 0% { -webkit-transform:translateY(100%); } 100% { -webkit-transform:translateY(0%); } } .slideBox_TopFromBottom_full_min{ width:2000px; height:6em; max-height:6em; filter:alpha(opacity=80); -moz-opacity:0.8; -khtml-opacity: 0.8; opacity: 0.8; animation-name: slideBox_TopFromBottom_full_min; -webkit-animation-name: slideBox_TopFromBottom_full_min; transform-origin: bottom -ms-transform-origin: bottom; -webkit-transform-origin: bottom; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: linear; -webkit-animation-timing-function: linear; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @keyframes slideBox_TopFromBottom_full_min { 0% { transform:translateY(100%); } 100% { transform:translateY(0%); } } @-webkit-keyframes slideBox_TopFromBottom_full_min { 0% { -webkit-transform:translateY(100%); } 100% { -webkit-transform:translateY(0%); } }