/* Document : Animated.css custom build Creadit: https://daneden.me/animate/ */ .foo img:last-child{display:none} .foo:hover img:first-child{display:none} .foo:hover img:last-child{display:inline-block} h1{ color: lime; font-family: "Courier"; font-size: 20px; margin: 10px 0 0 10px; white-space: nowrap; overflow: hidden; width: 30em; animation: type 4s steps(1000, end); animation-iteration-count: infinite; } h1:nth-child(2){ animation: type2 8s steps(1000, end); animation-iteration-count: infinite; } @keyframes type{ from { width: 0; } } @keyframes type2{ 0%{width: 0;} 50%{width: 0;} 100%{ width: 100; } } @keyframes blink{ to{opacity: .0;} } ::selection{ background: black; } .shake{ animation: animationFrames linear 1s; animation-iteration-count: infinite; transform-origin: 50% 50%; animation-fill-mode:forwards; -webkit-animation: animationFrames linear 1s; -webkit-animation-iteration-count: infinite; -webkit-transform-origin: 50% 50%; -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ -moz-animation: animationFrames linear 1s; -moz-animation-iteration-count: infinite; -moz-transform-origin: 50% 50%; -moz-animation-fill-mode:forwards; /*FF 5+*/ -o-animation: animationFrames linear 1s; -o-animation-iteration-count: infinite; -o-transform-origin: 50% 50%; -o-animation-fill-mode:forwards; /*Not implemented yet*/ -ms-animation: animationFrames linear 1s; -ms-animation-iteration-count: infinite; -ms-transform-origin: 50% 50%; -ms-animation-fill-mode:forwards; /*IE 10+*/*/ } @keyframes animationFrames{ -1% { transform: translate(-10px,0px) ; } 0% { transform: translate(0px,0px) ; } 20% { transform: translate(10px,0px) ; } 30% { transform: translate(-10px,0px) ; } 40% { transform: translate(10px,0px) ; } 50% { transform: translate(-10px,0px) ; } 60% { transform: translate(10px,0px) ; } 70% { transform: translate(-10px,0px) ; } 80% { transform: translate(10px,0px) ; } 90% { transform: translate(-10px,0px) ; } 100% { transform: translate(0px,0px) ; } } @-moz-keyframes animationFrames{ -1% { -moz-transform: translate(-10px,0px) ; } 0% { -moz-transform: translate(0px,0px) ; } 20% { -moz-transform: translate(10px,0px) ; } 30% { -moz-transform: translate(-10px,0px) ; } 40% { -moz-transform: translate(10px,0px) ; } 50% { -moz-transform: translate(-10px,0px) ; } 60% { -moz-transform: translate(10px,0px) ; } 70% { -moz-transform: translate(-10px,0px) ; } 80% { -moz-transform: translate(10px,0px) ; } 90% { -moz-transform: translate(-10px,0px) ; } 100% { -moz-transform: translate(0px,0px) ; } } @-webkit-keyframes animationFrames { -1% { -webkit-transform: translate(-10px,0px) ; } 0% { -webkit-transform: translate(0px,0px) ; } 20% { -webkit-transform: translate(10px,0px) ; } 30% { -webkit-transform: translate(-10px,0px) ; } 40% { -webkit-transform: translate(10px,0px) ; } 50% { -webkit-transform: translate(-10px,0px) ; } 60% { -webkit-transform: translate(10px,0px) ; } 70% { -webkit-transform: translate(-10px,0px) ; } 80% { -webkit-transform: translate(10px,0px) ; } 90% { -webkit-transform: translate(-10px,0px) ; } 100% { -webkit-transform: translate(0px,0px) ; } } @-o-keyframes animationFrames { -1% { -o-transform: translate(-10px,0px) ; } 0% { -o-transform: translate(0px,0px) ; } 20% { -o-transform: translate(10px,0px) ; } 30% { -o-transform: translate(-10px,0px) ; } 40% { -o-transform: translate(10px,0px) ; } 50% { -o-transform: translate(-10px,0px) ; } 60% { -o-transform: translate(10px,0px) ; } 70% { -o-transform: translate(-10px,0px) ; } 80% { -o-transform: translate(10px,0px) ; } 90% { -o-transform: translate(-10px,0px) ; } 100% { -o-transform: translate(0px,0px) ; } } @-ms-keyframes animationFrames { -1% { -ms-transform: translate(-10px,0px) ; } 0% { -ms-transform: translate(0px,0px) ; } 20% { -ms-transform: translate(10px,0px) ; } 30% { -ms-transform: translate(-10px,0px) ; } 40% { -ms-transform: translate(10px,0px) ; } 50% { -ms-transform: translate(-10px,0px) ; } 60% { -ms-transform: translate(10px,0px) ; } 70% { -ms-transform: translate(-10px,0px) ; } 80% { -ms-transform: translate(10px,0px) ; } 90% { -ms-transform: translate(-10px,0px) ; } 100% { -ms-transform: translate(0px,0px) ; } } @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%); } } .animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1.5s;-moz-animation-duration:1.5s;-ms-animation-duration:1.5s;-o-animation-duration:1.5s;animation-duration:1.5s;}.animated.hinge{-webkit-animation-duration:1.5s;-moz-animation-duration:1.5s;-ms-animation-duration:1.5s;-o-animation-duration:1.5s;animation-duration:1.5s;}@-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); } 50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(1); } } @-o-keyframes pulse { 0% { -o-transform: scale(1); } 50% { -o-transform: scale(1.1); } 100% { -o-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-10deg); } 70% { -webkit-transform: perspective(400px) rotateX(10deg); } 100% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-moz-keyframes flipInX { 0% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateX(-10deg); } 70% { -moz-transform: perspective(400px) rotateX(10deg); } 100% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @-o-keyframes flipInX { 0% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateX(-10deg); } 70% { -o-transform: perspective(400px) rotateX(10deg); } 100% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } } @keyframes flipInX { 0% { transform: perspective(400px) rotateX(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateX(-10deg); } 70% { transform: perspective(400px) rotateX(10deg); } 100% { transform: perspective(400px) rotateX(0deg); opacity: 1; } } .flipInX { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInX; -moz-backface-visibility: visible !important; -moz-animation-name: flipInX; -o-backface-visibility: visible !important; -o-animation-name: flipInX; backface-visibility: visible !important; animation-name: flipInX; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -webkit-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-moz-keyframes flipOutX { 0% { -moz-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -moz-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @-o-keyframes flipOutX { 0% { -o-transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { -o-transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { transform: perspective(400px) rotateX(0deg); opacity: 1; } 100% { transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; -webkit-backface-visibility: visible !important; -moz-animation-name: flipOutX; -moz-backface-visibility: visible !important; -o-animation-name: flipOutX; -o-backface-visibility: visible !important; animation-name: flipOutX; backface-visibility: visible !important; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-10deg); } 70% { -webkit-transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-moz-keyframes flipInY { 0% { -moz-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -moz-transform: perspective(400px) rotateY(-10deg); } 70% { -moz-transform: perspective(400px) rotateY(10deg); } 100% { -moz-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @-o-keyframes flipInY { 0% { -o-transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { -o-transform: perspective(400px) rotateY(-10deg); } 70% { -o-transform: perspective(400px) rotateY(10deg); } 100% { -o-transform: perspective(400px) rotateY(0deg); opacity: 1; } } @keyframes flipInY { 0% { transform: perspective(400px) rotateY(90deg); opacity: 0; } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { transform: perspective(400px) rotateY(0deg); opacity: 1; } } .flipInY { -webkit-backface-visibility: visible !important; -webkit-animation-name: flipInY; -moz-backface-visibility: visible !important; -moz-animation-name: flipInY; -o-backface-visibility: visible !important; -o-animation-name: flipInY; backface-visibility: visible !important; animation-name: flipInY; } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @-o-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } @keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} } .fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-20px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } .fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(20px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(20px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); } 100% { opacity: 1; transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); } 70% { -webkit-transform: scale(.9); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(.3); } 50% { opacity: 1; -moz-transform: scale(1.05); } 70% { -moz-transform: scale(.9); } 100% { -moz-transform: scale(1); } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(.3); } 50% { opacity: 1; -o-transform: scale(1.05); } 70% { -o-transform: scale(.9); } 100% { -o-transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.05); } 70% { transform: scale(.9); } 100% { transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0; } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateIn { 0% { -moz-transform-origin: center center; -moz-transform: rotate(-200deg); opacity: 0; } 100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } } @-o-keyframes rotateIn { 0% { -o-transform-origin: center center; -o-transform: rotate(-200deg); opacity: 0; } 100% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0; } 100% { transform-origin: center center; transform: rotate(0); opacity: 1; } } .left{float: left;} .right{float: right;} .rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -o-animation-name: rotateIn; animation-name: rotateIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */ @-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } } @-moz-keyframes rollIn { 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } } @-o-keyframes rollIn { 0% { opacity: 0; -o-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -o-transform: translateX(0px) rotate(0deg); } } @keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } } .rollIn { -webkit-animation-name: rollIn; -moz-animation-name: rollIn; -o-animation-name: rollIn; animation-name: rollIn; } /* ============================================== CSS3 ANIMATION CHEAT SHEET ============================================== Made by Justin Aguilar www.justinaguilar.com/animations/ Questions, comments, concerns, love letters: justin@justinaguilar.com ============================================== */ /* ============================================== slideDown ============================================== */ .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 ============================================== */ .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 ============================================== */ .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 ============================================== */ .slideRight{ animation-name: slideRight; -webkit-animation-name: slideRight; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-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%); } } /* ============================================== slideExpandUp ============================================== */ .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); } } /* ============================================== expandUp ============================================== */ .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 ============================================== */ .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; } } /* ============================================== expandOpen ============================================== */ .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); } } /* ============================================== bigEntrance ============================================== */ .bigEntrance{ animation-name: bigEntrance; -webkit-animation-name: bigEntrance; animation-duration: 1.6s; -webkit-animation-duration: 1.6s; animation-timing-function: ease-out; -webkit-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; } } /* ============================================== hatch ============================================== */ .hatch{ animation-name: hatch; -webkit-animation-name: hatch; animation-iteration-count: infinite; 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: 0% 100%; visibility: visible !important; } @keyframes hatch { 0% { transform: rotate(0deg) scaleY(0.6); } 20% { transform: rotate(0deg) scaleY(1.05); } 35% { transform: rotate(0deg) scaleY(1); } 50% { transform: rotate(0deg); } 65% { transform: rotate(0deg); } 80% { transform: rotate(0deg); } 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); } } /* ============================================== bounce ============================================== */ .bounce{ animation-name: bounce; -webkit-animation-name: bounce; /* animation-iteration-count: infinite;*/ 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); } } /* ============================================== pulse ============================================== */ .pulse{ animation-name: pulse; -webkit-animation-name: pulse; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; /* animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;*/ } @keyframes pulse { 0% { transform: scale(0.9); opacity: 0.7; } 50% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.9); opacity: 0.7; } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.95); opacity: 0.7; } 50% { -webkit-transform: scale(1); opacity: 1; } 100% { -webkit-transform: scale(0.95); opacity: 0.7; } } /* ============================================== floating ============================================== */ .floating{ animation-name: floating; -webkit-animation-name: floating; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; } @keyframes floating { 0% { transform: translateY(0%); } 50% { transform: translateY(8%); } 100% { transform: translateY(0%); } } @-webkit-keyframes floating { 0% { -webkit-transform: translateY(0%); } 50% { -webkit-transform: translateY(8%); } 100% { -webkit-transform: translateY(0%); } } /* ============================================== tossing ============================================== */ .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); } } /* ============================================== pullUp ============================================== */ .pullUp{ animation-name: pullUp; -webkit-animation-name: pullUp; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -webkit-transform-origin: 50% 100%; } @keyframes pullUp { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullUp { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* ============================================== pullDown ============================================== */ .pullDown{ animation-name: pullDown; -webkit-animation-name: pullDown; animation-duration: 1.1s; -webkit-animation-duration: 1.1s; animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; -webkit-transform-origin: 50% 0%; } @keyframes pullDown { 0% { transform: scaleY(0.1); } 40% { transform: scaleY(1.02); } 60% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(0.98); } 80% { transform: scaleY(1.01); } 100% { transform: scaleY(1); } } @-webkit-keyframes pullDown { 0% { -webkit-transform: scaleY(0.1); } 40% { -webkit-transform: scaleY(1.02); } 60% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(0.98); } 80% { -webkit-transform: scaleY(1.01); } 100% { -webkit-transform: scaleY(1); } } /* ============================================== stretchLeft ============================================== */ .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 ============================================== */ .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); } } /* css animation */ .magictime { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .magic { -webkit-animation-name: magic; animation-name: magic; } .openDownLeft { -webkit-animation-name: openDownLeft; animation-name: openDownLeft; } .openDownRight { -webkit-animation-name: openDownRight; animation-name: openDownRight; } .openUpLeft { -webkit-animation-name: openUpLeft; animation-name: openUpLeft; } .openUpRight { -webkit-animation-name: openUpRight; animation-name: openUpRight; } .openDownLeftRetourn { -webkit-animation-name: openDownLeftRetourn; animation-name: openDownLeftRetourn; } .openDownRightRetourn { -webkit-animation-name: openDownRightRetourn; animation-name: openDownRightRetourn; } .openUpLeftRetourn { -webkit-animation-name: openUpLeftRetourn; animation-name: openUpLeftRetourn; } .openUpRightRetourn { -webkit-animation-name: openUpRightRetourn; animation-name: openUpRightRetourn; } .openDownLeftOut { -webkit-animation-name: openDownLeftOut; animation-name: openDownLeftOut; } .openDownRightOut { -webkit-animation-name: openDownRightOut; animation-name: openDownRightOut; } .openUpLeftOut { -webkit-animation-name: openUpLeftOut; animation-name: openUpLeftOut; } .openUpRightOut { -webkit-animation-name: openUpRightOut; animation-name: openUpRightOut; } .perspectiveDown { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveDown; animation-name: perspectiveDown; } .perspectiveLeft { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveLeft; animation-name: perspectiveLeft; } .perspectiveRight { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveRight; animation-name: perspectiveRight; } .perspectiveUp { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveUp; animation-name: perspectiveUp; } .perspectiveDownRetourn { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveDownRetourn; animation-name: perspectiveDownRetourn; } .perspectiveLeftRetourn { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveLeftRetourn; animation-name: perspectiveLeftRetourn; } .perspectiveRightRetourn { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveRightRetourn; animation-name: perspectiveRightRetourn; } .perspectiveUpRetourn { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: perspectiveUpRetourn; animation-name: perspectiveUpRetourn; } .puffIn { -webkit-animation-name: puffIn; animation-name: puffIn; } .puffOut { -webkit-animation-name: puffOut; animation-name: puffOut; } .rotateDown { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: rotateDown; animation-name: rotateDown; } .rotateLeft { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: rotateLeft; animation-name: rotateLeft; } .rotateRight { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: rotateRight; animation-name: rotateRight; } .rotateUp { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: rotateUp; animation-name: rotateUp; } .slideDown { -webkit-animation-name: slideDown; animation-name: slideDown; } .slideLeft { -webkit-animation-name: slideLeft; animation-name: slideLeft; } .slideRight { -webkit-animation-name: slideRight; animation-name: slideRight; } .slideUp { -webkit-animation-name: slideUp; animation-name: slideUp; } .slideDownRetourn { -webkit-animation-name: slideDownRetourn; animation-name: slideDownRetourn; } .slideLeftRetourn { -webkit-animation-name: slideLeftRetourn; animation-name: slideLeftRetourn; } .slideRightRetourn { -webkit-animation-name: slideRightRetourn; animation-name: slideRightRetourn; } .slideUpRetourn { -webkit-animation-name: slideUpRetourn; animation-name: slideUpRetourn; } .swap { -webkit-animation-name: swap; animation-name: swap; } .twisterInDown { -webkit-animation-name: twisterInDown; animation-name: twisterInDown; } .twisterInUp { -webkit-animation-name: twisterInUp; animation-name: twisterInUp; } .vanishIn { -webkit-animation-name: vanishIn; animation-name: vanishIn; } .vanishOut { -webkit-animation-name: vanishOut; animation-name: vanishOut; } .swashOut { -webkit-animation-name: swashOut; animation-name: swashOut; } .swashIn { -webkit-animation-name: swashIn; animation-name: swashIn; } .foolishOut { -webkit-animation-name: foolishOut; animation-name: foolishOut; } .foolishIn { -webkit-animation-name: foolishIn; animation-name: foolishIn; } .holeOut { -webkit-animation-name: holeOut; animation-name: holeOut; } .tinRightOut { -webkit-animation-name: tinRightOut; animation-name: tinRightOut; } .tinLeftOut { -webkit-animation-name: tinLeftOut; animation-name: tinLeftOut; } .tinUpOut { -webkit-animation-name: tinUpOut; animation-name: tinUpOut; } .tinDownOut { -webkit-animation-name: tinDownOut; animation-name: tinDownOut; } .tinRightIn { -webkit-animation-name: tinRightIn; animation-name: tinRightIn; } .tinLeftIn { -webkit-animation-name: tinLeftIn; animation-name: tinLeftIn; } .tinUpIn { -webkit-animation-name: tinUpIn; animation-name: tinUpIn; } .tinDownIn { -webkit-animation-name: tinDownIn; animation-name: tinDownIn; } .bombRightOut { -webkit-animation-name: bombRightOut; animation-name: bombRightOut; } .bombLeftOut { -webkit-animation-name: bombLeftOut; animation-name: bombLeftOut; } .boingInUp { -webkit-animation-name: boingInUp; animation-name: boingInUp; } .boingOutDown { -webkit-animation-name: boingOutDown; animation-name: boingOutDown; } .spaceOutUp { -webkit-animation-name: spaceOutUp; animation-name: spaceOutUp; } .spaceOutRight { -webkit-animation-name: spaceOutRight; animation-name: spaceOutRight; } .spaceOutDown { -webkit-animation-name: spaceOutDown; animation-name: spaceOutDown; } .spaceOutLeft { -webkit-animation-name: spaceOutLeft; animation-name: spaceOutLeft; } .spaceInUp { -webkit-animation-name: spaceInUp; animation-name: spaceInUp; } .spaceInRight { -webkit-animation-name: spaceInRight; animation-name: spaceInRight; animation-iteration-count: infinite; } .spaceInDown { -webkit-animation-name: spaceInDown; animation-name: spaceInDown; } .spaceInLeft { -webkit-animation-name: spaceInLeft; animation-name: spaceInLeft; } @-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); } } @-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; } } @-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; } } @-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; } } @-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; } } @-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; } } @-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; } } @-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; } } @-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; } } @-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; } } @-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; } } @-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; } } @-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; } } @-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); } } @-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); } } @-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); } } @-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); } } @-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); } } @-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); } } @-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); } } @-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); } } @-webkit-keyframes puffIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(2,2); -webkit-filter: blur(2px); } 100% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1,1); -webkit-filter: blur(0px); } } @keyframes puffIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2,2); filter: blur(2px); } 100% { opacity: 1; transform-origin: 50% 50%; transform: scale(1,1); filter: blur(0px); } } @-webkit-keyframes puffOut { 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(2px); } } @keyframes puffOut { 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(2px); } } @-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); } } @-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); } } @-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); } } @-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); } } @-webkit-keyframes slideDown { 0% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(0%); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(100%); } } @keyframes slideDown { 0% { transform-origin: 0 0; transform: translateY(0%); } 100% { transform-origin: 0 0; transform: translateY(100%); } } @-webkit-keyframes slideLeft { 0% { -webkit-transform-origin: 0 0;; -webkit-transform: translateX(0%); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(-100%); } } @keyframes slideLeft { 0% { transform-origin: 0 0; transform: translateX(0%); } 100% { transform-origin: 0 0; transform: translateX(-100%); } } @-webkit-keyframes slideRight { 0% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(0%); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(100%); } } @keyframes slideRight { 0% { transform-origin: 0 0; transform: translateX(0%); } 100% { transform-origin: 0 0; transform: translateX(100%); } } @-webkit-keyframes slideUp { 0% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(0%); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(-100%); } } @keyframes slideUp { 0% { transform-origin: 0 0; transform: translateY(0%); } 100% { transform-origin: 0 0; transform: translateY(-100%); } } @-webkit-keyframes slideDownRetourn { 0% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(100%); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(0%); } } @keyframes slideDownRetourn { 0% { transform-origin: 0 0; transform: translateY(100%); } 100% { transform-origin: 0 0; transform: translateY(0%); } } @-webkit-keyframes slideLeftRetourn { 0% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(-100%); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(0%); } } @keyframes slideLeftRetourn { 0% { transform-origin: 0 0; transform: translateX(-100%); } 100% { transform-origin: 0 0; transform: translateX(0%); } } @-webkit-keyframes slideRightRetourn { 0% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(10%); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: translateX(0%); } } @keyframes slideRightRetourn { 0% { transform-origin: 0 0; transform: translateX(100%); } 100% { transform-origin: 0 0; transform: translateX(0%); } } @-webkit-keyframes slideUpRetourn { 0% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(-100%); } 100% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(0%); } } @keyframes slideUpRetourn { 0% { transform-origin: 0 0; transform: translateY(-100%); } 100% { transform-origin: 0 0; transform: translateY(0%); } } @-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); } } @-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%); } } @-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); } } @-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); } } @-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); } } @-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); } } @-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); } } @-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); } } @-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); } } @-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); } } @-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%); } } @-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%); } } @-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%); } } @-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%); } } @-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); } } @-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); } } @-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); } } @-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); } } @-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); } } @-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); } } @-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); } } @-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); } } @-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%); } } @-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%); } } @-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%); } } @-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%); } } @-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%); } } @-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%); } } @-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%); } } @-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%); } }