.animated { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.fast { -webkit-animation-duration: 1s; animation-duration: 1s; } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0);z } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { opacity:1; -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { opacity:1; -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { opacity:1; -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, 100% { -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } 100% { opacity:1; -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } @keyframes rotateIn { 0% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate3d(0, 0, 1, -200deg); transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } 100% { -webkit-transform-origin: center; transform-origin: center; -webkit-transform: none; transform: none; opacity: 1; } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); opacity:1; } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg); transform: perspective(400px) rotate3d(0, 1, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg); transform: perspective(400px) rotate3d(0, 1, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg); transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg); transform: perspective(400px) rotate3d(0, 1, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); opacity:1; } } .flipInY{ -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes zoomRotateIn { 0% { opacity: 0; -webkit-transform: scale3d(.8, .8, .8) rotate(180deg) translate(1000px, 0); transform: scale3d(.8, .8, .8) rotate(180deg) translate(1000px, 0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 1; } } @keyframes zoomRotateIn { 0% { opacity: 0; -webkit-transform: scale3d(.8, .8, .8) rotate(180deg) translate(1000px, 0); transform: scale3d(.8, .8, .8) rotate(180deg) translate(1000px, 0); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); opacity: 1; } } .zoomRotateIn { -webkit-animation-name: zoomRotateIn; animation-name: zoomRotateIn; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(400px); transform: perspective(400px); opacity:1; } } @keyframes flipInX { 0% { -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 80deg); transform: perspective(1000px) rotate3d(1, 0, 0, 80deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, -20deg); transform: perspective(1000px) rotate3d(1, 0, 0, -20deg); -webkit-transition-timing-function: ease-in; transition-timing-function: ease-in; } 60% { -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, 10deg); transform: perspective(1000px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(1000px) rotate3d(1, 0, 0, -5deg); transform: perspective(1000px) rotate3d(1, 0, 0, -5deg); } 100% { -webkit-transform: perspective(1000px); transform: perspective(1000px); opacity:1; } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes zoomSlopIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 1; } } @keyframes zoomSlopIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 1; } } .zoomSlopIn { -webkit-animation-name: zoomSlopIn; animation-name: zoomSlopIn; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); transform: scale3d(.3, .3, .3); } 100% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpBig { -webkit-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInUpSmall { 0% { opacity: 0; -webkit-transform: translate3d(0, 500px, 0); transform: translate3d(0, 500px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpSmall { 0% { opacity: 0; -webkit-transform: translate3d(0, 500px, 0); transform: translate3d(0, 500px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUpSmall { -webkit-animation-name: fadeInUpSmall; animation-name: fadeInUpSmall; } @-webkit-keyframes fadeInDownSmall { 0% { opacity: 0; -webkit-transform: translate3d(0, -1000px, 0); transform: translate3d(0, -1000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDownSmall { 0% { opacity: 0; -webkit-transform: translate3d(0, -1000px, 0); transform: translate3d(0, -1000px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDownSmall { -webkit-animation-name: fadeInDownSmall; animation-name: fadeInDownSmall; } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInLeft { -webkit-animation-name: zoomInLeft; animation-name: zoomInLeft; } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } @keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); } 60% { opacity: 1; -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); } } .zoomInRight { -webkit-animation-name: zoomInRight; animation-name: zoomInRight; } @-webkit-keyframes lightSpeedIn{ 0%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0} 60%{-webkit-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1} 80%{-webkit-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1} 100%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1} } @keyframes lightSpeedIn{ 0%{-webkit-transform:translateX(100%) skewX(-30deg);-ms-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0} 60%{-webkit-transform:translateX(-20%) skewX(30deg);-ms-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1} 80%{-webkit-transform:translateX(0%) skewX(-15deg);-ms-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1} 100%{-webkit-transform:translateX(0%) skewX(0deg);-ms-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1} } .lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out} @-webkit-keyframes fadeIn{ 0%{opacity:0}100%{opacity:1} } @keyframes fadeIn{0%{opacity:0}100%{opacity:1} } .fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn} @-webkit-keyframes shakeIn{ 0%{ opacity:0} 0%,100%{-webkit-transform:translateX(0);transform:translateX(0)} 10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)} 20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)} 100%{ opacity:1} } @keyframes shakeIn{ 0%{ opacity:0} 0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)} 10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)} 20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)} 100%{ opacity:1} } .shakeIn{-webkit-animation-name:shakeIn;animation-name:shakeIn} @-webkit-keyframes pulse{ 0%{-webkit-transform:scale(1);transform:scale(1)} 50%{-webkit-transform:scale(1.1);transform:scale(1.1)} 100%{-webkit-transform:scale(1);transform:scale(1)} } @keyframes pulse{ 0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)} 50%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)} 100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)} } .pulse{-webkit-animation-name:pulse;animation-name:pulse} @-webkit-keyframes slideInLeft{ 0%{-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0);visibility:visible} 100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0); opacity:1;} } @keyframes slideInLeft{ 0%{-webkit-transform:translate3d(-100px,0,0);transform:translate3d(-100px,0,0);visibility:visible} 100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;} } .slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft} @-webkit-keyframes slideInRight{ 0%{-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0);visibility:visible} 100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0); opacity:1;} } @keyframes slideInRight{ 0%{-webkit-transform:translate3d(100px,0,0);transform:translate3d(100px,0,0);visibility:visible} 100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;} } .slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight} @-webkit-keyframes slideInDown{ 0%{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0);visibility:visible} 100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0); opacity:1;} } @keyframes slideInDown{ 0%{-webkit-transform:translate3d(0,-100px,0);transform:translate3d(0,-100px,0);visibility:visible} 100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0); opacity:1;} } .slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown} @-webkit-keyframes slideInUp{ 0%{-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0);visibility:visible} 100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0); opacity:1;} } @keyframes slideInUp{ 0%{-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0);visibility:visible} 100%{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0); opacity:1;} } .slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}