/* slideUpBounce */ @keyframes slideUpBounce { 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 slideUpBounce { 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%); } } .slideUpBounce{ animation-name: slideUpBounce; -webkit-animation-name: slideUpBounce; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } /*fade in*/ @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } .fadeIn { visibility: visible !important; -webkit-backface-visibility: visible !important; -webkit-animation: fadeIn .5s; -moz-animation: fadeIn .5s; animation: fadeIn .5s; } .fadeInSlow { visibility: visible !important; -webkit-backface-visibility: visible !important; -webkit-animation: fadeIn 2.5s; -moz-animation: fadeIn 2.5s; animation: fadeIn 2.5s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; } @-webkit-keyframes blurIn { 0% { -webkit-filter: blur(20px); } 100% { -webkit-filter: blur(0px); } } @-moz-keyframes blurIn { 0% { -moz-filter: blur(20px); } 100% { -moz-filter: blur(0px); } } @keyframes blurIn { 0% { filter: blur(20px); } 100% { filter: blur(0px); } } .blurIn { visibility: visible !important; -webkit-animation: blurIn 1s; -moz-animation: blurIn 1s; animation: blurIn 1s; } @-webkit-keyframes blurOut { 0% { -webkit-filter: blur(0px); } 100% { -webkit-filter: blur(20px); } } @-moz-keyframes blurOut { 0% { -moz-filter: blur(0px); } 100% { -moz-filter: blur(20px); } } @keyframes blurOut { 0% { filter: blur(0px); } 100% { filter: blur(20px); } } .blurOut { visibility: visible !important; -webkit-animation: blurOut .5s; -moz-animation: blurOut .5s; animation: blurOut .5s; } /*fade out*/ @-webkit-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } @-moz-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } @keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } .fadeOut { visibility: visible !important; -webkit-backface-visibility: visible !important; -webkit-animation: fadeOut .8s; -moz-animation: fadeOut .8s; animation: fadeOut .8s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; } .fadeOutSlow { visibility: visible !important; -webkit-backface-visibility: visible !important; -webkit-animation: fadeOut 1.5s; -moz-animation: fadeOut 1.5s; animation: fadeOut 1.5s; -webkit-animation-fill-mode:forwards; -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; } /* move in */ @-webkit-keyframes moveInLeft { 0% { opacity: 0; transform: rotate3d(0,1,0,90deg); } 30% { -webkit-transform: rotate3d(0,1,0,90deg); opacity: 0; } 60% { -webkit-transform: rotate3d(0,1,0,-13deg); opacity: 1; } 70% { -webkit-transform: rotate3d(0,1,0,8deg); opacity: 1; } 80% { -webkit-transform: rotate3d(0,1,0,0deg); opacity: 1; } 95% { -webkit-transform: rotate3d(0,1,0,3deg); opacity: 1; } 100% { -webkit-transform: rotate3d(0,1,0,0deg); opacity: 1; } } @-moz-keyframes moveInLeft { 0% { opacity: 0; transform: rotate3d(0,1,0,90deg); } 30% { -moz-transform: rotate3d(0,1,0,90deg); opacity: 0; } 60% { -moz-transform: rotate3d(0,1,0,-13deg); opacity: 1; } 70% { -moz-transform: rotate3d(0,1,0,8deg); opacity: 1; } 80% { -moz-transform: rotate3d(0,1,0,0deg); opacity: 1; } 95% { -moz-transform: rotate3d(0,1,0,3deg); opacity: 1; } 100% { -moz-transform: rotate3d(0,1,0,0deg); opacity: 1; } } @keyframes moveInLeft { 0% { opacity: 0; transform: rotate3d(0,1,0,90deg); } 30% { transform: rotate3d(0,1,0,90deg); opacity: 0; } 60% { transform: rotate3d(0,1,0,-13deg); opacity: 1; } 70% { transform: rotate3d(0,1,0,8deg); opacity: 1; } 80% { transform: rotate3d(0,1,0,0deg); opacity: 1; } 95% { transform: rotate3d(0,1,0,3deg); opacity: 1; } 100% { transform: rotate3d(0,1,0,0deg); opacity: 1; } } @-webkit-keyframes moveOutLeft { 0% { -webkit-transform: rotate3d(0,1,0,0deg); opacity: 1; -webkit-animation-timing-function: ease-in;} 30% { -webkit-transform: rotate3d(0,1,0,-90deg); opacity: 0.5; -webkit-animation-timing-function: ease-out;} 100% { -webkit-transform: rotate3d(0,1,0,-180deg); opacity: 0; } } @-moz-keyframes moveOutLeft { 0% { -moz-transform: rotate3d(0,1,0,0deg); opacity: 1; -moz-animation-timing-function: ease-in;} 30% { -moz-transform: rotate3d(0,1,0,-90deg); opacity: 0.5; -moz-animation-timing-function: ease-out;} 100% { -moz-transform: rotate3d(0,1,0,-180deg); opacity: 0; } } @keyframes moveOutLeft { 0% { transform: rotate3d(0,1,0,0deg); opacity: 1; animation-timing-function: ease-in;} 30% { transform: rotate3d(0,1,0,-90deg); opacity: 0.5; animation-timing-function: ease-out;} 100% { transform: rotate3d(0,1,0,-180deg); opacity: 0; } } .moveInLeft { -webkit-transform-origin: 0% 50%; visibility: visible !important; -webkit-backface-visibility: visible !important; -webkit-animation: moveInLeft 1s; -moz-transform-origin: 0% 50%; -moz-backface-visibility: visible !important; -moz-animation: moveInLeft 1s; transform-origin: 0% 50%; backface-visibility: visible !important; animation: moveInLeft 1s; } .moveOutLeft { -webkit-transform-origin: 0% 50%; visibility: visible !important; -webkit-backface-visibility: visible !important; -webkit-animation: moveOutLeft 1s; -moz-transform-origin: 0% 50%; -moz-backface-visibility: visible !important; -moz-animation: moveOutLeft 1s; transform-origin: 0% 50%; backface-visibility: visible !important; animation: moveOutLeft 1s; z-index:10; background-color:#CCC; } /*flip x*/ @-webkit-keyframes flipX { 0% { -webkit-transform: perspective(600px) rotateX(0deg); } 50% { -webkit-transform: perspective(600px) rotateX(-180deg); } 100% { -webkit-transform: perspective(600px) rotateX(-360deg); } } @keyframes flipX { 0% { transform: perspective(600px) rotateX(0deg); } 50% { transform: perspective(600px) rotateX(-180deg); } 100% { transform: perspective(600px) rotateX(-360deg); } } .flipX { visibility: visible !important; -webkit-backface-visibility: visible !important; -webkit-animation: flipX .5s; backface-visibility: visible !important; animation: flipX .5s; } /*fade flip x y*/ @-webkit-keyframes fadeFlipX { 0% { -webkit-transform: perspective(600px) rotateX(0deg); } 25% { -webkit-transform: perspective(600px) rotateX(40deg); background:rgba(50,50,50,0.5); } 50% { -webkit-transform: perspective(600px) rotateX(-10deg); } 75% { -webkit-transform: perspective(600px) rotateX(10deg); } 100% { -webkit-transform: perspective(600px) rotateX(0deg); } } @keyframes fadeFlipX { 0% { transform: perspective(600px) rotateX(0deg); } 25% { transform: perspective(600px) rotateX(40deg); background:rgba(50,50,50,0.5); } 50% { transform: perspective(600px) rotateX(-10deg); } 75% { transform: perspective(600px) rotateX(10deg); } 100% { transform: perspective(600px) rotateX(0deg); } } .fadeFlipX { visibility: visible !important; -webkit-backface-visibility: visible !important; -webkit-animation: fadeFlipX 1s; backface-visibility: visible !important; animation: fadeFlipX 1s; } /* slide down */ @-webkit-keyframes slideDown { 0% { -webkit-transform: translateY(-100%); opacity:0; } 100% { -webkit-transform: translateY(0%); opacity:1; } } @keyframes slideDown { 0% { transform: translateY(-100%); opacity:0; } 100% { transform: translateY(-1%); opacity:1; } } .slideDown { visibility: visible !important; -webkit-backface-visibility: visible !important; -webkit-animation: slideDown .8s ease-out; backface-visibility: visible !important; animation: slideDown .8s ease-out; } /* slide up */ @-webkit-keyframes slideUp { 0% { -webkit-transform: translateY(100%); opacity:0; } 100% { -webkit-transform: translateY(0%); opacity:1; } } @keyframes slideUp { 0% { transform: translateY(100%); opacity:0; } 100% { transform: translateY(0%); opacity:1; } } .slideUp { visibility: visible !important; -webkit-backface-visibility: visible !important; -webkit-animation: slideUp .8s ease-out; backface-visibility: visible !important; animation: slideUp .8s ease-out; } /* drop in bounce */ @-webkit-keyframes dropInBounce { 0% { -webkit-transform: perspective(600px) translateY(-200%) rotateX(-50deg); opacity:0; } 85% { -webkit-transform: perspective(600px) translateY(10%) rotateX(5deg); opacity:.85; } 100% { -webkit-transform: perspective(600px) translateY(0%) rotateX(0deg); opacity:1; } } @-moz-keyframes dropInBounce { 0% { -moz-transform: perspective(600px) translateY(-200%) rotateX(-50deg); opacity:0; } 85% { -moz-transform: perspective(600px) translateY(10%) rotateX(5deg); opacity:.85; } 100% { -moz-transform: perspective(600px) translateY(1%) rotateX(0deg); opacity:1; } } @keyframes dropInBounce { 0% { transform: perspective(600px) translateY(-200%) rotateX(-50deg); opacity:0; } 85% { transform: perspective(600px) translateY(10%) rotateX(5deg); opacity:.85; } 100% { transform: perspective(600px) translateY(1%) rotateX(0deg); opacity:1; } } .dropInBounce { visibility: visible !important; -webkit-backface-visibility: visible !important; -webkit-animation: dropInBounce 1s ease-in-out; -moz-backface-visibility: visible !important; -moz-animation: dropInBounce 1s ease-in-out; backface-visibility: visible !important; animation: dropInBounce 1s ease-in-out; } /* pull in */ @-webkit-keyframes pullIn { 0% { -webkit-transform: perspective(400px) translateZ(-50px); -webkit-filter: blur(20px); opacity:0; } 80% { -webkit-transform: perspective(400px) translateZ(0px); -webkit-filter: blur(0px); opacity:1; } } @keyframes pullIn { 0% { transform: perspective(400px) translateZ(-50px); opacity:0; } 100% { transform: perspective(400px) translateZ(0px); opacity:1; } } .pullIn { visibility: visible !important; -webkit-backface-visibility: visible !important; -webkit-animation: pullIn 1s ease-in-out; backface-visibility: visible !important; animation: pullIn 1s ease-in-out; } /* pull left */ @-webkit-keyframes pullLeft { 0% { -webkit-transform:translateX(0%); opacity:1; } 40% { opacity:1; } 100% { -webkit-transform:translateX(-100%); opacity:0; } } @keyframes pullLeft { 0% { transform:translateX(0%); opacity:1; } 40% { opacity:1; } 100% { transform:translateX(-100%); opacity:0; } } .pullLeft { -webkit-backface-visibility: hidden; -webkit-animation: pullLeft 1s ease-in-out; animation: pullLeft 1s ease-in-out; } .pullLeftFaster { -webkit-backface-visibility: hidden; -webkit-animation: pullLeft .3s ease-in-out; animation: pullLeft .3s ease-in-out; } /* pull right */ @-webkit-keyframes pullRight { 0% { -webkit-transform:translateX(0%); opacity:1; } 40% { opacity:1; } 100% { -webkit-transform:translateX(100%); opacity:0; } } @keyframes pullRight { 0% { transform:translateX(0%); opacity:1; } 40% { opacity:1; } 100% { transform:translateX(100%); opacity:0; } } .pullRight { -webkit-backface-visibility: hidden; -webkit-animation: pullRight 1s ease-in-out; animation: pullRight 1s ease-in-out; } /* pull left in */ @-webkit-keyframes pullLeftIn { 0% { -webkit-transform:translateX(-100%); opacity:0; } 100% { -webkit-transform:translateX(0%); opacity:1; } } @keyframes pullLeftIn { 0% { transform:translateX(-100%); opacity:0; } 100% { transform:translateX(0%); opacity:1; } } .pullLeftIn { -webkit-backface-visibility: hidden; -webkit-animation: pullLeftIn .8s ease-in-out; animation: pullLeftIn .8s ease-in-out; } /* pull right in */ @-webkit-keyframes pullRightIn { 0% { -webkit-transform:translateX(100%); opacity:0; } 100% { -webkit-transform:translateX(0%); opacity:1; } } @keyframes pullRightIn { 0% { transform:translateX(100%); opacity:0; } 100% { transform:translateX(0%); opacity:1; } } .pullRightIn { -webkit-backface-visibility: hidden; -webkit-animation: pullRightIn .8s ease-in-out; animation: pullRightIn .8s ease-in-out; } /* raise in */ @-webkit-keyframes raiseIn { 0% { -webkit-transform: perspective(600px) translateZ(-800px) translateY(-50%) translateX(-50%) rotateX(40deg); opacity:0; } 100% { -webkit-transform: perspective(600px) translateZ(0px) translateY(0%) translateX(-0%) rotateX(0deg); opacity:1; } } @keyframes raiseIn { 0% { transform: perspective(600px) translateZ(-800px) translateY(-50%) translateX(-50%) rotateX(40deg); opacity:0; } 100% { transform: perspective(600px) translateZ(0px) translateY(0%) translateX(-0%) rotateX(0deg); opacity:1; } } .raiseIn { visibility: visible !important; -webkit-backface-visibility: visible !important; -webkit-animation: raiseIn .5s ease-in-out; backface-visibility: visible !important; animation: raiseIn .5s ease-in-out; } /* raise in */ @-webkit-keyframes curveIn { 0% { -webkit-transform: perspective(600px) translateZ(-800px) translateY(100%) translateX(50%) rotateZ(-90deg); -webkit-transform-origin:100%; opacity:0; } 100% { -webkit-transform: perspective(600px) translateZ(0px) translateY(0%) translateX(0%) rotateZ(0deg); -webkit-transform-origin:100%; opacity:1; } } @keyframes curveIn { 0% { transform: perspective(600px) translateZ(-800px) translateY(100%) translateX(50%) rotateZ(-90deg); transform-origin:100%; opacity:0; } 100% { transform: perspective(600px) translateZ(0px) translateY(0%) translateX(0%) rotateZ(0deg); transform-origin:100%; opacity:1; } } .curveIn { visibility: visible !important; -webkit-backface-visibility: visible !important; -webkit-animation: curveIn .8s ease-in-out; backface-visibility: visible !important; animation: curveIn .8s ease-in-out; } @-webkit-keyframes curveOut { 0% { -webkit-transform: perspective(600px) translateZ(0px) translateY(0%) translateX(0%) rotateZ(0deg); -webkit-transform-origin:100%; opacity:1; } 100% { -webkit-transform: perspective(600px) translateZ(-800px) translateY(50%) translateX(-50%) rotateZ(-90deg); -webkit-transform-origin:100%; opacity:0; } } @keyframes curveOut { 0% { transform: perspective(600px) translateZ(0px) translateY(0%) translateX(0%) rotateZ(0deg); transform-origin:100%; opacity:1; } 100% { transform: perspective(600px) translateZ(-800px) translateY(50%) translateX(-50%) rotateZ(-90deg); transform-origin:100%; opacity:0; } } .curveOut { visibility: visible !important; -webkit-backface-visibility: visible !important; -webkit-animation: curveOut .8s ease-in-out; backface-visibility: visible !important; animation: curveOut .8s ease-in-out; } /* slide in */ @-webkit-keyframes slideIn { 0% { -webkit-transform: perspective(600px) translateZ(-800px) translateX(-100%) rotateY(-60deg); opacity:0; } 50% { -webkit-transform: perspective(600px) translateZ(-20px) translateX(-25%); opacity:.5; } 100% { -webkit-transform: perspective(600px) translateZ(0px) translateX(0%); opacity:1; } } @keyframes slideIn { 0% { transform: perspective(600px) translateZ(-800px) translateX(-100%) rotateY(-60deg); opacity:0; } 50% { transform: perspective(600px) translateZ(-20px) translateX(-25%); opacity:.5; } 100% { transform: perspective(600px) translateZ(0px) translateX(-1%); opacity:1; } } .slideIn { visibility: visible !important; -webkit-backface-visibility: visible !important; -webkit-animation: slideIn .8s ease-in-out; backface-visibility: visible !important; animation: slideIn .8s ease-in-out; } /*flip marker*/ @-webkit-keyframes flipMarker { 0% { -webkit-transform: perspective(600px) rotateX(0deg) scale(1,1); } 50% { -webkit-transform: perspective(600px) rotateX(0deg) scale(1.2,1.2); } 100% { -webkit-transform: perspective(600px) rotateX(0deg) scale(1,1); } } @-moz-keyframes flipMarker { 0% { -moz-transform: perspective(600px) rotateX(0deg) scale(1,1); } 50% { -moz-transform: perspective(600px) rotateX(0deg) scale(1.2,1.2); } 100% { -moz-transform: perspective(600px) rotateX(0deg) scale(1,1); } } @keyframes flipMarker { 0% { transform: perspective(600px) rotateX(0deg) scale(1,1); } 50% { transform: perspective(600px) rotateX(0deg) scale(1.2,1.2); } 100% { transform: perspective(600px) rotateX(0deg) scale(1,1); } } .flipMarker { visibility: visible !important; -webkit-backface-visibility: visible !important; -webkit-animation: flipMarker 1s infinite; -moz-backface-visibility: visible !important; -moz-animation: flipMarker 1s infinite; backface-visibility: visible !important; animation: flipMarker 1s infinite; }