.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); } } /* ============================================== slideDown ============================================== */ .slideDown{ animation-name: slideDown; -webkit-animation-name: slideDown; animation-duration: 2s; -webkit-animation-duration: 2s; 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%); } } .slideDownLittle{ animation-name: slideDownLittle; -webkit-animation-name: slideDownLittle; -moz-animation-name: slideDownLittle; -ms-animation-name: slideDownLittle; -o-animation-name: slideDownLittle; animation-duration: 2s; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -0-animation-duration: 2s; animation-timing-function: ease; -webkit-animation-timing-function: ease; -moz-animation-timing-function: ease; -ms-animation-timing-function: ease; -o-animation-timing-function: ease; visibility: visible !important; } @keyframes slideDownLittle { 0% { transform: translateY(-20px); opacity:0 } 100% { transform: translateY(0%); opacity:1 } } @-webkit-keyframes slideDownLittle { 0% { -webkit-transform: translateY(-20px); opacity:0 } 100% { -webkit-transform: translateY(0%); opacity:1 } } @-moz-keyframes slideDownLittle { 0% { -moz-transform: translateY(-20px); opacity:0 } 100% { -moz-transform: translateY(0%); opacity:1 } } @-ms-keyframes slideDownLittle { 0% { -ms-transform: translateY(-20px); opacity:0 } 100% { -ms-transform: translateY(0%); opacity:1 } } @-o-keyframes slideDownLittle { 0% { -o-transform: translateY(-20px); opacity:0 } 100% { -o-transform: translateY(0%); opacity:1 } } /* ============================================== slideUp ============================================== */ .slideUp{ animation-name: slideUp; -webkit-animation-name: slideUp; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-timing-function: ease; -webkit-animation-timing-function: ease; visibility: visible !important; } @keyframes slideUp { 0% { transform: translateY(10%); } 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: 2.5s; -webkit-animation-duration: 2.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft { 0% { transform: translateX(200%); } 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%); } } .slideLeft1{ z-index:8; animation-name: slideLeft1; -webkit-animation-name: slideLeft1; -moz-animation-name: slideLeft1; -ms-animation-name: slideLeft1; -o-animation-name: slideLeft1; animation-duration: .7s; -webkit-animation-duration: .7s; -moz-animation-duration: .7s; -ms-animation-duration: .7s; -o-animation-duration: .7s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft1 { 0% { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); opacity: 0.0; } 95% { transform: translateX(100%); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-webkit-keyframes slideLeft1 { 0% { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); opacity: 0.0; } 95% { transform: translateX(100%); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-moz-keyframes slideLeft1 { 0% { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); opacity: 0.0; } 95% { transform: translateX(100%); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-ms-keyframes slideLeft1 { 0% { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); opacity: 0.0; } 95% { transform: translateX(100%); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-o-keyframes slideLeft1 { 0% { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); opacity: 0.0; } 95% { transform: translateX(100%); } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } .slideLeft1a{ z-index:8; animation-name: slideLeft1a; -webkit-animation-name: slideLeft1a; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft1a { 0% { -webkit-transform: translateX(200%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); opacity: 1; } } @-webkit-keyframes slideLeft1a { 0% { -webkit-transform: translateX(200%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); opacity: 1; } } .slideLeft1b{ z-index:8; animation-name: slideLeft1b; -webkit-animation-name: slideLeft1b; -moz-animation-name: slideLeft1b; -ms-animation-name: slideLeft1b; -o-animation-name: slideLeft1b; animation-duration: 2s; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -0-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft1b { 0% { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-webkit-keyframes slideLeft1b { 0% { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-moz-keyframes slideLeft1b { 0% { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-ms-keyframes slideLeft1b { 0% { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-o-keyframes slideLeft1b { 0% { -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } .slideLeft2{ z-index:6; animation-name: slideLeft2; -webkit-animation-name: slideLeft2; -moz-animation-name: slideLeft2; -ms-animation-name: slideLeft2; -o-animation-name: slideLeft2; animation-duration: 1.8s; -webkit-animation-duration: 1.8s; -moz-animation-duration: 1.8s; -ms-animation-duration: 1.8s; -o-animation-duration: 1.8s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideLeft2 { 0% { -webkit-transform: translateX(300%); -moz-transform: translateX(300%); -ms-transform: translateX(300%); -o-transform: translateX(300%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-webkit-keyframes slideLeft2 { 0% {-webkit-transform: translateX(300%); -moz-transform: translateX(300%); -ms-transform: translateX(300%); -o-transform: translateX(300%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-webkit-keyframes slideLeft2 { 0% {-webkit-transform: translateX(300%); -moz-transform: translateX(300%); -ms-transform: translateX(300%); -o-transform: translateX(300%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-moz-keyframes slideLeft2 { 0% {-webkit-transform: translateX(300%); -moz-transform: translateX(300%); -ms-transform: translateX(300%); -o-transform: translateX(300%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-o-keyframes slideLeft2 { 0% {-webkit-transform: translateX(300%); -moz-transform: translateX(300%); -ms-transform: translateX(300%); -o-transform: translateX(300%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } /* ============================================== 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%); } } .slideRight1{ z-index:8; animation-name: slideRight1; -webkit-animation-name: slideRight1; -moz-animation-name: slideRight1; -ms-animation-name: slideRight1; -o-animation-name: slideRight1; animation-duration: 2s; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight1 { 0% { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); -ms-transform: translateX(-300%); -o-transform: translateX(-300%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-moz-keyframes slideRight1 { 0% { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); -ms-transform: translateX(-300%); -o-transform: translateX(-300%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-ms-keyframes slideRight1 { 0% { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); -ms-transform: translateX(-300%); -o-transform: translateX(-300%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-o-keyframes slideRight1 { 0% { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); -ms-transform: translateX(-300%); -o-transform: translateX(-300%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-webkit-keyframes slideRight1 { 0% { -webkit-transform: translateX(-300%); -moz-transform: translateX(-300%); -ms-transform: translateX(-300%); -o-transform: translateX(-300%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } .slideRight1a{ z-index:8; animation-name: slideRight1a; -webkit-animation-name: slideRight1a; -moz-animation-name: slideRight1a; -ms-animation-name: slideRight1a; -o-animation-name: slideRight1a; animation-duration: 2s; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight1a { 0% { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -ms-transform: translateX(-200%); -o-transform: translateX(-200%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-webkit-keyframes slideRight1a { 0% { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -ms-transform: translateX(-200%); -o-transform: translateX(-200%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-moz-keyframes slideRight1a { 0% { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -ms-transform: translateX(-200%); -o-transform: translateX(-200%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-ms-keyframes slideRight1a { 0% { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -ms-transform: translateX(-200%); -o-transform: translateX(-200%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-o-keyframes slideRight1a { 0% { -webkit-transform: translateX(-200%); -moz-transform: translateX(-200%); -ms-transform: translateX(-200%); -o-transform: translateX(-200%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } .slideRight1b{ z-index:8; animation-name: slideRight1b; -webkit-animation-name: slideRight1b; -moz-animation-name: slideRight1b; -ms-animation-name: slideRight1b; -o-animation-name: slideRight1b; animation-duration: 2s; -webkit-animation-duration: 2s; -moz-animation-duration: 2s; -ms-animation-duration: 2s; -o-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight1b { 0% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-webkit-keyframes slideRight1b { 0% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-moz-keyframes slideRight1b { 0% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-ms-keyframes slideRight1b { 0% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } @-o-keyframes slideRight1b { 0% { -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); -ms-transform: translateX(-100%); -o-transform: translateX(-100%); opacity: 0.0; } 100% { -webkit-transform: translateX(0%); -moz-transform: translateX(0%); -ms-transform: translateX(0%); -o-transform: translateX(0%); opacity: 1; } } .slideRight2{ z-index:6; animation-name: slideRight2; -webkit-animation-name: slideRight2; animation-duration: 1s; -webkit-animation-duration: 1s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes slideRight2 { 0% { -webkit-transform: translateX(-200%); opacity: 0.0; } 95% { transform: translateX(-200%); } 100% { -webkit-transform: translateX(0%); opacity: 1; } } @-webkit-keyframes slideRight2 { 0% { -webkit-transform: translateX(-200%); opacity: 0.0; } 95% { transform: translateX(-200%); } 100% { -webkit-transform: translateX(0%); opacity: 1; } } /* ============================================== 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 ============================================== */ @-webkit-keyframes fadeInA { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeInA { from { opacity:0; } to { opacity:1; } } .fade-inA { opacity:0; /* make things invisible upon start */ -webkit-animation:fadeInA ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ -moz-animation:fadeInA ease-in 1; animation:fadeInA ease-in 1; -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:2s; -moz-animation-duration:2s; animation-duration:2s; visibility:visible !important; } @-webkit-keyframes fadeInB { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeInB { from { opacity:0; } to { opacity:1; } } @keyframes fadeInB { from { opacity:0; } to { opacity:1; } } .fade-inB { opacity:0; /* make things invisible upon start */ -webkit-animation:fadeInB ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ -moz-animation:fadeInB ease-in 1; animation:fadeInB ease-in 1; -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:0.5s; -moz-animation-duration:0.5s; animation-duration:0.5s; visibility:visible !important; } @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } .fade-in { opacity:0; /* make things invisible upon start */ -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; -webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s; visibility:visible !important; } .fade-in.one {-webkit-animation-delay: 0.0s; -moz-animation-delay: 0.0s; animation-delay: 0.0s;} .fade-in.two {-webkit-animation-delay: 0.4s; -moz-animation-delay:0.4s; animation-delay: 0.4s;} .fade-in.three { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; animation-delay: 0.7s;} .fade-in.four { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; animation-delay: 1s;} .fadeIn1{ animation-name: fadeIn1; -webkit-animation-name: fadeIn1; -moz-animation-name: fadeIn1; -ms-animation-name: fadeIn1; -o-animation-name: fadeIn1; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; -moz-animation-duration: 1.5s; -ms-animation-duration: 1.5s; -o-animation-duration: 1.5s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -ms-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes fadeIn1 { 0% { transform: scale(0); opacity: 0.0; } 50% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn1 { 0% { -webkit-transform: scale(0); opacity: 0.0; } 100% { -webkit-transform: scale(1); opacity: 1; } } @-moz-keyframes fadeIn1 { 0% { -moz-transform: scale(0); opacity: 0.0; } 100% { -moz-transform: scale(1); opacity: 1; } } @-ms-keyframes fadeIn1 { 0% { -ms-transform: scale(0); opacity: 0.0; } 100% { -ms-transform: scale(1); opacity: 1; } } @-o-keyframes fadeIn1 { 0% { -o-transform: scale(0); opacity: 0.0; } 100% { -o-transform: scale(1); opacity: 1; } } .fadeIn2{ z-index:10; animation-name: fadeIn2; -webkit-animation-name: fadeIn2; animation-duration: .7s; -webkit-animation-duration: .7s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; visibility: visible !important; } @keyframes fadeIn2 { 0% { transform: scale(0); opacity: 0.0; } 30% { transform: scale(0); } 60% { transform: scale(1.3); } 80% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @-webkit-keyframes fadeIn2 { 0% { -webkit-transform: scale(0); opacity: 0.0; } 30% { transform: scale(0); } 60% { -webkit-transform: scale(1.3); } 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-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); } } /* ============================================== bounce ============================================== */ .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); } } /* ============================================== 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 ============================================== */ /* ============================================== 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: 2.5s; -webkit-animation-duration: 2.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.0); } 40% { transform: scaleX(0.0); } 60% { transform: scaleX(0.5); } 80% { transform: scaleX(1.01); } 100% { transform: scaleX(1); } } @-webkit-keyframes stretchRight { 0% { -webkit-transform: scaleX(0.0); } 40% { -webkit-transform: scaleX(0.0); } 60% { -webkit-transform: scaleX(0.0); } 80% { -webkit-transform: scaleX(1.01); } 100% { -webkit-transform: scaleX(1); } }