/* Animations v1.0, Copyright 2014, Joe Mottershaw, https://github.com/joemottershaw/ // ================================================================================== */ @-moz-document url-prefix() { . animate, . onHoverBounce, . onHoverExplode, . onHoverFlash, . onHoverHeartbeat, . onHoverPanic, . onHoverPullback, . onHoverPulsate, . onHoverPulse, . onHoverShake, . onHoverSpin, . onHoverStrobe, . onHoverTada, . onHoverWave, . onHoverWobble, . trigger { opacity: 0; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both } . ie . animate, . no-js . animate, . onHoverBounce, . onHoverExplode, . onHoverFlash, . onHoverHeartbeat, . onHoverPanic, . onHoverPullback, . onHoverPulsate, . onHoverPulse, . onHoverShake, . onHoverSpin, . onHoverStrobe, . onHoverTada, . onHoverWave, . onHoverWobble, . trigger { opacity: 1 } . animate . infinite, . onHoverBounce . infinite, . onHoverExplode . infinite, . onHoverFlash . infinite, . onHoverHeartbeat . infinite, . onHoverPanic . infinite, . onHoverPullback . infinite, . onHoverPulsate . infinite, . onHoverPulse . infinite, . onHoverShake . infinite, . onHoverSpin . infinite, . onHoverStrobe . infinite, . onHoverTada . infinite, . onHoverWave . infinite, . onHoverWobble . infinite, . trigger . infinite { -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite } @-webkit-keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-moz-keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-ms-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 } } . animate . fadeIn, . trigger . fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -ms-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(200px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(200px) } 100% { opacity: 1; -moz-transform: translateY(0) } } @-ms-keyframes fadeInUp { 0% { opacity: 0; -ms-transform: translateY(200px) } 100% { opacity: 1; -ms-transform: translateY(0) } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(200px) } 100% { opacity: 1; -o-transform: translateY(0) } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(200px) } 100% { opacity: 1; transform: translateY(0) } } . animate . fadeInUp, . trigger . fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -ms-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-200px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-200px) } 100% { opacity: 1; -moz-transform: translateY(0) } } @-ms-keyframes fadeInDown { 0% { opacity: 0; -ms-transform: translateY(-200px) } 100% { opacity: 1; -ms-transform: translateY(0) } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-200px) } 100% { opacity: 1; -o-transform: translateY(0) } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-200px) } 100% { opacity: 1; transform: translateY(0) } } . animate . fadeInDown, . trigger . fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -ms-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-200px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-200px) } 100% { opacity: 1; -moz-transform: translateX(0) } } @-ms-keyframes fadeInLeft { 0% { opacity: 0; -ms-transform: translateX(-200px) } 100% { opacity: 1; -ms-transform: translateX(0) } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-200px) } 100% { opacity: 1; -o-transform: translateX(0) } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-200px) } 100% { opacity: 1; transform: translateX(0) } } . animate . fadeInLeft, . trigger . fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -ms-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(200px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(200px) } 100% { opacity: 1; -moz-transform: translateX(0) } } @-ms-keyframes fadeInRight { 0% { opacity: 0; -ms-transform: translateX(200px) } 100% { opacity: 1; -ms-transform: translateX(0) } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(200px) } 100% { opacity: 1; -o-transform: translateX(0) } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(200px) } 100% { opacity: 1; transform: translateX(0) } } . animate . fadeInRight, . trigger . fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -ms-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight } @-webkit-keyframes fadeInUpLarge { 0% { opacity: 0; -webkit-transform: translateY(1000px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeInUpLarge { 0% { opacity: 0; -moz-transform: translateY(1000px) } 100% { opacity: 1; -moz-transform: translateY(0) } } @-ms-keyframes fadeInUpLarge { 0% { opacity: 0; -ms-transform: translateY(1000px) } 100% { opacity: 1; -ms-transform: translateY(0) } } @-o-keyframes fadeInUpLarge { 0% { opacity: 0; -o-transform: translateY(1000px) } 100% { opacity: 1; -o-transform: translateY(0) } } @keyframes fadeInUpLarge { 0% { opacity: 0; transform: translateY(1000px) } 100% { opacity: 1; transform: translateY(0) } } . animate . fadeInUpLarge, . trigger . fadeInUpLarge { -webkit-animation-name: fadeInUpLarge; -moz-animation-name: fadeInUpLarge; -ms-animation-name: fadeInUpLarge; -o-animation-name: fadeInUpLarge; animation-name: fadeInUpLarge } @-webkit-keyframes fadeInDownLarge { 0% { opacity: 0; -webkit-transform: translateY(-1000px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeInDownLarge { 0% { opacity: 0; -moz-transform: translateY(-1000px) } 100% { opacity: 1; -moz-transform: translateY(0) } } @-ms-keyframes fadeInDownLarge { 0% { opacity: 0; -ms-transform: translateY(-1000px) } 100% { opacity: 1; -ms-transform: translateY(0) } } @-o-keyframes fadeInDownLarge { 0% { opacity: 0; -o-transform: translateY(-1000px) } 100% { opacity: 1; -o-transform: translateY(0) } } @keyframes fadeInDownLarge { 0% { opacity: 0; transform: translateY(-1000px) } 100% { opacity: 1; transform: translateY(0) } } . animate . fadeInDownLarge, . trigger . fadeInDownLarge { -webkit-animation-name: fadeInDownLarge; -moz-animation-name: fadeInDownLarge; -ms-animation-name: fadeInDownLarge; -o-animation-name: fadeInDownLarge; animation-name: fadeInDownLarge } @-webkit-keyframes fadeInLeftLarge { 0% { opacity: 0; -webkit-transform: translateX(-1000px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInLeftLarge { 0% { opacity: 0; -moz-transform: translateX(-1000px) } 100% { opacity: 1; -moz-transform: translateX(0) } } @-ms-keyframes fadeInLeftLarge { 0% { opacity: 0; -ms-transform: translateX(-1000px) } 100% { opacity: 1; -ms-transform: translateX(0) } } @-o-keyframes fadeInLeftLarge { 0% { opacity: 0; -o-transform: translateX(-1000px) } 100% { opacity: 1; -o-transform: translateX(0) } } @keyframes fadeInLeftLarge { 0% { opacity: 0; transform: translateX(-1000px) } 100% { opacity: 1; transform: translateX(0) } } . animate . fadeInLeftLarge, . trigger . fadeInLeftLarge { -webkit-animation-name: fadeInLeftLarge; -moz-animation-name: fadeInLeftLarge; -ms-animation-name: fadeInLeftLarge; -o-animation-name: fadeInLeftLarge; animation-name: fadeInLeftLarge } @-webkit-keyframes fadeInRightLarge { 0% { opacity: 0; -webkit-transform: translateX(1000px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInRightLarge { 0% { opacity: 0; -moz-transform: translateX(1000px) } 100% { opacity: 1; -moz-transform: translateX(0) } } @-ms-keyframes fadeInRightLarge { 0% { opacity: 0; -ms-transform: translateX(1000px) } 100% { opacity: 1; -ms-transform: translateX(0) } } @-o-keyframes fadeInRightLarge { 0% { opacity: 0; -o-transform: translateX(1000px) } 100% { opacity: 1; -o-transform: translateX(0) } } @keyframes fadeInRightLarge { 0% { opacity: 0; transform: translateX(1000px) } 100% { opacity: 1; transform: translateX(0) } } . animate . fadeInRightLarge, . trigger . fadeInRightLarge { -webkit-animation-name: fadeInRightLarge; -moz-animation-name: fadeInRightLarge; -ms-animation-name: fadeInRightLarge; -o-animation-name: fadeInRightLarge; animation-name: fadeInRightLarge } @-webkit-keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @-moz-keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @-ms-keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @-o-keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } . animate . fadeOut, . trigger . fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -ms-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-200px) } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(-200px) } } @-ms-keyframes fadeOutUp { 0% { opacity: 1; -ms-transform: translateY(0) } 100% { opacity: 0; -ms-transform: translateY(-200px) } } @-o-keyframes fadeOutUp { 0% { opacity: 1; -o-transform: translateY(0) } 100% { opacity: 0; -o-transform: translateY(-200px) } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(-200px) } } . animate . fadeOutUp, . trigger . fadeOutUp { -webkit-animation-name: fadeOutUp; -moz-animation-name: fadeOutUp; -ms-animation-name: fadeOutUp; -o-animation-name: fadeOutUp; animation-name: fadeOutUp } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(200px) } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(200px) } } @-ms-keyframes fadeOutDown { 0% { opacity: 1; -ms-transform: translateY(0) } 100% { opacity: 0; -ms-transform: translateY(200px) } } @-o-keyframes fadeOutDown { 0% { opacity: 1; -o-transform: translateY(0) } 100% { opacity: 0; -o-transform: translateY(200px) } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(200px) } } . animate . fadeOutDown, . trigger . fadeOutDown { -webkit-animation-name: fadeOutDown; -moz-animation-name: fadeOutDown; -ms-animation-name: fadeOutDown; -o-animation-name: fadeOutDown; animation-name: fadeOutDown } @-webkit-keyframes fadeOutLeft { 0% { opacity: 0; -webkit-transform: translateX(0) } 100% { opacity: 1; -webkit-transform: translateX(-200px) } } @-moz-keyframes fadeOutLeft { 0% { opacity: 0; -moz-transform: translateX(0) } 100% { opacity: 1; -moz-transform: translateX(-200px) } } @-ms-keyframes fadeOutLeft { 0% { opacity: 0; -ms-transform: translateX(0) } 100% { opacity: 1; -ms-transform: translateX(-200px) } } @-o-keyframes fadeOutLeft { 0% { opacity: 0; -o-transform: translateX(0) } 100% { opacity: 1; -o-transform: translateX(-200px) } } @keyframes fadeOutLeft { 0% { opacity: 0; transform: translateX(0) } 100% { opacity: 1; transform: translateX(-200px) } } . animate . fadeOutLeft, . trigger . fadeOutLeft { -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -ms-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft } @-webkit-keyframes fadeOutRight { 0% { opacity: 0; -webkit-transform: translateX(0) } 100% { opacity: 1; -webkit-transform: translateX(200px) } } @-moz-keyframes fadeOutRight { 0% { opacity: 0; -moz-transform: translateX(0) } 100% { opacity: 1; -moz-transform: translateX(200px) } } @-ms-keyframes fadeOutRight { 0% { opacity: 0; -ms-transform: translateX(0) } 100% { opacity: 1; -ms-transform: translateX(200px) } } @-o-keyframes fadeOutRight { 0% { opacity: 0; -o-transform: translateX(0) } 100% { opacity: 1; -o-transform: translateX(200px) } } @keyframes fadeOutRight { 0% { opacity: 0; transform: translateX(0) } 100% { opacity: 1; transform: translateX(200px) } } . animate . fadeOutRight, . trigger . fadeOutRight { -webkit-animation-name: fadeOutRight; -moz-animation-name: fadeOutRight; -ms-animation-name: fadeOutRight; -o-animation-name: fadeOutRight; animation-name: fadeOutRight } @-webkit-keyframes fadeOutUpLarge { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-1000px) } } @-moz-keyframes fadeOutUpLarge { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(-1000px) } } @-ms-keyframes fadeOutUpLarge { 0% { opacity: 1; -ms-transform: translateY(0) } 100% { opacity: 0; -ms-transform: translateY(-1000px) } } @-o-keyframes fadeOutUpLarge { 0% { opacity: 1; -o-transform: translateY(0) } 100% { opacity: 0; -o-transform: translateY(-1000px) } } @keyframes fadeOutUpLarge { 0% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(-1000px) } } . animate . fadeOutUpLarge, . trigger . fadeOutUpLarge { -webkit-animation-name: fadeOutUpLarge; -moz-animation-name: fadeOutUpLarge; -ms-animation-name: fadeOutUpLarge; -o-animation-name: fadeOutUpLarge; animation-name: fadeOutUpLarge } @-webkit-keyframes fadeOutDownLarge { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(1000px) } } @-moz-keyframes fadeOutDownLarge { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(1000px) } } @-ms-keyframes fadeOutDownLarge { 0% { opacity: 1; -ms-transform: translateY(0) } 100% { opacity: 0; -ms-transform: translateY(1000px) } } @-o-keyframes fadeOutDownLarge { 0% { opacity: 1; -o-transform: translateY(0) } 100% { opacity: 0; -o-transform: translateY(1000px) } } @keyframes fadeOutDownLarge { 0% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(1000px) } } . animate . fadeOutDownLarge, . trigger . fadeOutDownLarge { -webkit-animation-name: fadeOutDownLarge; -moz-animation-name: fadeOutDownLarge; -ms-animation-name: fadeOutDownLarge; -o-animation-name: fadeOutDownLarge; animation-name: fadeOutDownLarge } @-webkit-keyframes fadeOutLeftLarge { 0% { opacity: 0; -webkit-transform: translateX(0) } 100% { opacity: 1; -webkit-transform: translateX(-1000px) } } @-moz-keyframes fadeOutLeftLarge { 0% { opacity: 0; -moz-transform: translateX(0) } 100% { opacity: 1; -moz-transform: translateX(-1000px) } } @-ms-keyframes fadeOutLeftLarge { 0% { opacity: 0; -ms-transform: translateX(0) } 100% { opacity: 1; -ms-transform: translateX(-1000px) } } @-o-keyframes fadeOutLeftLarge { 0% { opacity: 0; -o-transform: translateX(0) } 100% { opacity: 1; -o-transform: translateX(-1000px) } } @keyframes fadeOutLeftLarge { 0% { opacity: 0; transform: translateX(0) } 100% { opacity: 1; transform: translateX(-1000px) } } . animate . fadeOutLeftLarge, . trigger . fadeOutLeftLarge { -webkit-animation-name: fadeOutLeftLarge; -moz-animation-name: fadeOutLeftLarge; -ms-animation-name: fadeOutLeftLarge; -o-animation-name: fadeOutLeftLarge; animation-name: fadeOutLeftLarge } @-webkit-keyframes fadeOutRightLarge { 0% { opacity: 0; -webkit-transform: translateX(0) } 100% { opacity: 1; -webkit-transform: translateX(1000px) } } @-moz-keyframes fadeOutRightLarge { 0% { opacity: 0; -moz-transform: translateX(0) } 100% { opacity: 1; -moz-transform: translateX(1000px) } } @-ms-keyframes fadeOutRightLarge { 0% { opacity: 0; -ms-transform: translateX(0) } 100% { opacity: 1; -ms-transform: translateX(1000px) } } @-o-keyframes fadeOutRightLarge { 0% { opacity: 0; -o-transform: translateX(0) } 100% { opacity: 1; -o-transform: translateX(1000px) } } @keyframes fadeOutRightLarge { 0% { opacity: 0; transform: translateX(0) } 100% { opacity: 1; transform: translateX(1000px) } } . animate . fadeOutRightLarge, . trigger . fadeOutRightLarge { -webkit-animation-name: fadeOutRightLarge; -moz-animation-name: fadeOutRightLarge; -ms-animation-name: fadeOutRightLarge; -o-animation-name: fadeOutRightLarge; animation-name: fadeOutRightLarge } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale(0) } 100% { opacity: 1; -webkit-transform: scale(1) } } @-moz-keyframes zoomIn { 0% { opacity: 0; -moz-transform: scale(0) } 100% { opacity: 1; -moz-transform: scale(1) } } @-ms-keyframes zoomIn { 0% { opacity: 0; -ms-transform: scale(0) } 100% { opacity: 1; -ms-transform: scale(1) } } @-o-keyframes zoomIn { 0% { opacity: 0; -o-transform: scale(0) } 100% { opacity: 1; -o-transform: scale(1) } } @keyframes zoomIn { 0% { opacity: 0; transform: scale(0) } 100% { opacity: 1; transform: scale(1) } } . animate . zoomIn, . trigger . zoomIn { -webkit-animation-name: zoomIn; -moz-animation-name: zoomIn; -ms-animation-name: zoomIn; -o-animation-name: zoomIn; animation-name: zoomIn } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale(0) translateY(200px) } 100% { opacity: 1; -webkit-transform: scale(1) translateY(0) } } @-moz-keyframes zoomInUp { 0% { opacity: 0; -moz-transform: scale(0) translateY(200px) } 100% { opacity: 1; -moz-transform: scale(1) translateY(0) } } @-ms-keyframes zoomInUp { 0% { opacity: 0; -ms-transform: scale(0) translateY(200px) } 100% { opacity: 1; -ms-transform: scale(1) translateY(0) } } @-o-keyframes zoomInUp { 0% { opacity: 0; -o-transform: scale(0) translateY(200px) } 100% { opacity: 1; -o-transform: scale(1) translateY(0) } } @keyframes zoomInUp { 0% { opacity: 0; transform: scale(0) translateY(200px) } 100% { opacity: 1; transform: scale(1) translateY(0) } } . animate . zoomInUp, . trigger . zoomInUp { -webkit-animation-name: zoomInUp; -moz-animation-name: zoomInUp; -ms-animation-name: zoomInUp; -o-animation-name: zoomInUp; animation-name: zoomInUp } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale(0) translateY(-200px) } 100% { opacity: 1; -webkit-transform: scale(1) translateY(0) } } @-moz-keyframes zoomInDown { 0% { opacity: 0; -moz-transform: scale(0) translateY(-200px) } 100% { opacity: 1; -moz-transform: scale(1) translateY(0) } } @-ms-keyframes zoomInDown { 0% { opacity: 0; -ms-transform: scale(0) translateY(-200px) } 100% { opacity: 1; -ms-transform: scale(1) translateY(0) } } @-o-keyframes zoomInDown { 0% { opacity: 0; -o-transform: scale(0) translateY(-200px) } 100% { opacity: 1; -o-transform: scale(1) translateY(0) } } @keyframes zoomInDown { 0% { opacity: 0; transform: scale(0) translateY(-200px) } 100% { opacity: 1; transform: scale(1) translateY(0) } } . animate . zoomInDown, . trigger . zoomInDown { -webkit-animation-name: zoomInDown; -moz-animation-name: zoomInDown; -ms-animation-name: zoomInDown; -o-animation-name: zoomInDown; animation-name: zoomInDown } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale(0) translateX(-200px) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(0) } } @-moz-keyframes zoomInLeft { 0% { opacity: 0; -moz-transform: scale(0) translateX(-200px) } 100% { opacity: 1; -moz-transform: scale(1) translateX(0) } } @-ms-keyframes zoomInLeft { 0% { opacity: 0; -ms-transform: scale(0) translateX(-200px) } 100% { opacity: 1; -ms-transform: scale(1) translateX(0) } } @-o-keyframes zoomInLeft { 0% { opacity: 0; -o-transform: scale(0) translateX(-200px) } 100% { opacity: 1; -o-transform: scale(1) translateX(0) } } @keyframes zoomInLeft { 0% { opacity: 0; transform: scale(0) translateX(-200px) } 100% { opacity: 1; transform: scale(1) translateX(0) } } . animate . zoomInLeft, . trigger . zoomInLeft { -webkit-animation-name: zoomInLeft; -moz-animation-name: zoomInLeft; -ms-animation-name: zoomInLeft; -o-animation-name: zoomInLeft; animation-name: zoomInLeft } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale(0) translateX(200px) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(0) } } @-moz-keyframes zoomInRight { 0% { opacity: 0; -moz-transform: scale(0) translateX(200px) } 100% { opacity: 1; -moz-transform: scale(1) translateX(0) } } @-ms-keyframes zoomInRight { 0% { opacity: 0; -ms-transform: scale(0) translateX(200px) } 100% { opacity: 1; -ms-transform: scale(1) translateX(0) } } @-o-keyframes zoomInRight { 0% { opacity: 0; -o-transform: scale(0) translateX(200px) } 100% { opacity: 1; -o-transform: scale(1) translateX(0) } } @keyframes zoomInRight { 0% { opacity: 0; transform: scale(0) translateX(200px) } 100% { opacity: 1; transform: scale(1) translateX(0) } } . animate . zoomInRight, . trigger . zoomInRight { -webkit-animation-name: zoomInRight; -moz-animation-name: zoomInRight; -ms-animation-name: zoomInRight; -o-animation-name: zoomInRight; animation-name: zoomInRight } @-webkit-keyframes zoomInUpLarge { 0% { opacity: 0; -webkit-transform: scale(0) translateY(1000px) } 100% { opacity: 1; -webkit-transform: scale(1) translateY(0) } } @-moz-keyframes zoomInUpLarge { 0% { opacity: 0; -moz-transform: scale(0) translateY(1000px) } 100% { opacity: 1; -moz-transform: scale(1) translateY(0) } } @-ms-keyframes zoomInUpLarge { 0% { opacity: 0; -ms-transform: scale(0) translateY(1000px) } 100% { opacity: 1; -ms-transform: scale(1) translateY(0) } } @-o-keyframes zoomInUpLarge { 0% { opacity: 0; -o-transform: scale(0) translateY(1000px) } 100% { opacity: 1; -o-transform: scale(1) translateY(0) } } @keyframes zoomInUpLarge { 0% { opacity: 0; transform: scale(0) translateY(1000px) } 100% { opacity: 1; transform: scale(1) translateY(0) } } . animate . zoomInUpLarge, . trigger . zoomInUpLarge { -webkit-animation-name: zoomInUpLarge; -moz-animation-name: zoomInUpLarge; -ms-animation-name: zoomInUpLarge; -o-animation-name: zoomInUpLarge; animation-name: zoomInUpLarge } @-webkit-keyframes zoomInDownLarge { 0% { opacity: 0; -webkit-transform: scale(0) translateY(-1000px) } 100% { opacity: 1; -webkit-transform: scale(1) translateY(0) } } @-moz-keyframes zoomInDownLarge { 0% { opacity: 0; -moz-transform: scale(0) translateY(-1000px) } 100% { opacity: 1; -moz-transform: scale(1) translateY(0) } } @-ms-keyframes zoomInDownLarge { 0% { opacity: 0; -ms-transform: scale(0) translateY(-1000px) } 100% { opacity: 1; -ms-transform: scale(1) translateY(0) } } @-o-keyframes zoomInDownLarge { 0% { opacity: 0; -o-transform: scale(0) translateY(-1000px) } 100% { opacity: 1; -o-transform: scale(1) translateY(0) } } @keyframes zoomInDownLarge { 0% { opacity: 0; transform: scale(0) translateY(-1000px) } 100% { opacity: 1; transform: scale(1) translateY(0) } } . animate . zoomInDownLarge, . trigger . zoomInDownLarge { -webkit-animation-name: zoomInDownLarge; -moz-animation-name: zoomInDownLarge; -ms-animation-name: zoomInDownLarge; -o-animation-name: zoomInDownLarge; animation-name: zoomInDownLarge } @-webkit-keyframes zoomInLeftLarge { 0% { opacity: 0; -webkit-transform: scale(0) translateX(-1000px) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(0) } } @-moz-keyframes zoomInLeftLarge { 0% { opacity: 0; -moz-transform: scale(0) translateX(-1000px) } 100% { opacity: 1; -moz-transform: scale(1) translateX(0) } } @-ms-keyframes zoomInLeftLarge { 0% { opacity: 0; -ms-transform: scale(0) translateX(-1000px) } 100% { opacity: 1; -ms-transform: scale(1) translateX(0) } } @-o-keyframes zoomInLeftLarge { 0% { opacity: 0; -o-transform: scale(0) translateX(-1000px) } 100% { opacity: 1; -o-transform: scale(1) translateX(0) } } @keyframes zoomInLeftLarge { 0% { opacity: 0; transform: scale(0) translateX(-1000px) } 100% { opacity: 1; transform: scale(1) translateX(0) } } . animate . zoomInLeftLarge, . trigger . zoomInLeftLarge { -webkit-animation-name: zoomInLeftLarge; -moz-animation-name: zoomInLeftLarge; -ms-animation-name: zoomInLeftLarge; -o-animation-name: zoomInLeftLarge; animation-name: zoomInLeftLarge } @-webkit-keyframes zoomInRightLarge { 0% { opacity: 0; -webkit-transform: scale(0) translateX(1000px) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(0) } } @-moz-keyframes zoomInRightLarge { 0% { opacity: 0; -moz-transform: scale(0) translateX(1000px) } 100% { opacity: 1; -moz-transform: scale(1) translateX(0) } } @-ms-keyframes zoomInRightLarge { 0% { opacity: 0; -ms-transform: scale(0) translateX(1000px) } 100% { opacity: 1; -ms-transform: scale(1) translateX(0) } } @-o-keyframes zoomInRightLarge { 0% { opacity: 0; -o-transform: scale(0) translateX(1000px) } 100% { opacity: 1; -o-transform: scale(1) translateX(0) } } @keyframes zoomInRightLarge { 0% { opacity: 0; transform: scale(0) translateX(1000px) } 100% { opacity: 1; transform: scale(1) translateX(0) } } . animate . zoomInRightLarge, . trigger . zoomInRightLarge { -webkit-animation-name: zoomInRightLarge; -moz-animation-name: zoomInRightLarge; -ms-animation-name: zoomInRightLarge; -o-animation-name: zoomInRightLarge; animation-name: zoomInRightLarge } @-webkit-keyframes zoomOut { 0% { opacity: 1; -webkit-transform: scale(1) } 100% { opacity: 0; -webkit-transform: scale(0) } } @-moz-keyframes zoomOut { 0% { opacity: 1; -moz-transform: scale(1) } 100% { opacity: 0; -moz-transform: scale(0) } } @-ms-keyframes zoomOut { 0% { opacity: 1; -ms-transform: scale(1) } 100% { opacity: 0; -ms-transform: scale(0) } } @-o-keyframes zoomOut { 0% { opacity: 1; -o-transform: scale(1) } 100% { opacity: 0; -o-transform: scale(0) } } @keyframes zoomOut { 0% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0) } } . animate . zoomOut, . trigger . zoomOut { -webkit-animation-name: zoomOut; -moz-animation-name: zoomOut; -ms-animation-name: zoomOut; -o-animation-name: zoomOut; animation-name: zoomOut } @-webkit-keyframes zoomOutUp { 0% { opacity: 1; -webkit-transform: scale(1) translateY(0) } 100% { opacity: 0; -webkit-transform: scale(0) translateY(-200px) } } @-moz-keyframes zoomOutUp { 0% { opacity: 1; -moz-transform: scale(1) translateY(0) } 100% { opacity: 0; -moz-transform: scale(0) translateY(-200px) } } @-ms-keyframes zoomOutUp { 0% { opacity: 1; -ms-transform: scale(1) translateY(0) } 100% { opacity: 0; -ms-transform: scale(0) translateY(-200px) } } @-o-keyframes zoomOutUp { 0% { opacity: 1; -o-transform: scale(1) translateY(0) } 100% { opacity: 0; -o-transform: scale(0) translateY(-200px) } } @keyframes zoomOutUp { 0% { opacity: 1; transform: scale(1) translateY(0) } 100% { opacity: 0; transform: scale(0) translateY(-200px) } } . animate . zoomOutUp, . trigger . zoomOutUp { -webkit-animation-name: zoomOutUp; -moz-animation-name: zoomOutUp; -ms-animation-name: zoomOutUp; -o-animation-name: zoomOutUp; animation-name: zoomOutUp } @-webkit-keyframes zoomOutDown { 0% { opacity: 1; -webkit-transform: scale(1) translateY(0) } 100% { opacity: 0; -webkit-transform: scale(0) translateY(200px) } } @-moz-keyframes zoomOutDown { 0% { opacity: 1; -moz-transform: scale(1) translateY(0) } 100% { opacity: 0; -moz-transform: scale(0) translateY(200px) } } @-ms-keyframes zoomOutDown { 0% { opacity: 1; -ms-transform: scale(1) translateY(0) } 100% { opacity: 0; -ms-transform: scale(0) translateY(200px) } } @-o-keyframes zoomOutDown { 0% { opacity: 1; -o-transform: scale(1) translateY(0) } 100% { opacity: 0; -o-transform: scale(0) translateY(200px) } } @keyframes zoomOutDown { 0% { opacity: 1; transform: scale(1) translateY(0) } 100% { opacity: 0; transform: scale(0) translateY(200px) } } . animate . zoomOutDown, . trigger . zoomOutDown { -webkit-animation-name: zoomOutDown; -moz-animation-name: zoomOutDown; -ms-animation-name: zoomOutDown; -o-animation-name: zoomOutDown; animation-name: zoomOutDown } @-webkit-keyframes zoomOutLeft { 0% { opacity: 0; -webkit-transform: scale(0) translateX(0) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(-200px) } } @-moz-keyframes zoomOutLeft { 0% { opacity: 0; -moz-transform: scale(0) translateX(0) } 100% { opacity: 1; -moz-transform: scale(1) translateX(-200px) } } @-ms-keyframes zoomOutLeft { 0% { opacity: 0; -ms-transform: scale(0) translateX(0) } 100% { opacity: 1; -ms-transform: scale(1) translateX(-200px) } } @-o-keyframes zoomOutLeft { 0% { opacity: 0; -o-transform: scale(0) translateX(0) } 100% { opacity: 1; -o-transform: scale(1) translateX(-200px) } } @keyframes zoomOutLeft { 0% { opacity: 0; transform: scale(0) translateX(0) } 100% { opacity: 1; transform: scale(1) translateX(-200px) } } . animate . zoomOutLeft, . trigger . zoomOutLeft { -webkit-animation-name: zoomOutLeft; -moz-animation-name: zoomOutLeft; -ms-animation-name: zoomOutLeft; -o-animation-name: zoomOutLeft; animation-name: zoomOutLeft } @-webkit-keyframes zoomOutRight { 0% { opacity: 0; -webkit-transform: scale(0) translateX(0) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(200px) } } @-moz-keyframes zoomOutRight { 0% { opacity: 0; -moz-transform: scale(0) translateX(0) } 100% { opacity: 1; -moz-transform: scale(1) translateX(200px) } } @-ms-keyframes zoomOutRight { 0% { opacity: 0; -ms-transform: scale(0) translateX(0) } 100% { opacity: 1; -ms-transform: scale(1) translateX(200px) } } @-o-keyframes zoomOutRight { 0% { opacity: 0; -o-transform: scale(0) translateX(0) } 100% { opacity: 1; -o-transform: scale(1) translateX(200px) } } @keyframes zoomOutRight { 0% { opacity: 0; transform: scale(0) translateX(0) } 100% { opacity: 1; transform: scale(1) translateX(200px) } } . animate . zoomOutRight, . trigger . zoomOutRight { -webkit-animation-name: zoomOutRight; -moz-animation-name: zoomOutRight; -ms-animation-name: zoomOutRight; -o-animation-name: zoomOutRight; animation-name: zoomOutRight } @-webkit-keyframes zoomOutUpLarge { 0% { opacity: 1; -webkit-transform: scale(1) translateY(0) } 100% { opacity: 0; -webkit-transform: scale(0) translateY(-1000px) } } @-moz-keyframes zoomOutUpLarge { 0% { opacity: 1; -moz-transform: scale(1) translateY(0) } 100% { opacity: 0; -moz-transform: scale(0) translateY(-1000px) } } @-ms-keyframes zoomOutUpLarge { 0% { opacity: 1; -ms-transform: scale(1) translateY(0) } 100% { opacity: 0; -ms-transform: scale(0) translateY(-1000px) } } @-o-keyframes zoomOutUpLarge { 0% { opacity: 1; -o-transform: scale(1) translateY(0) } 100% { opacity: 0; -o-transform: scale(0) translateY(-1000px) } } @keyframes zoomOutUpLarge { 0% { opacity: 1; transform: scale(1) translateY(0) } 100% { opacity: 0; transform: scale(0) translateY(-1000px) } } . animate . zoomOutUpLarge, . trigger . zoomOutUpLarge { -webkit-animation-name: zoomOutUpLarge; -moz-animation-name: zoomOutUpLarge; -ms-animation-name: zoomOutUpLarge; -o-animation-name: zoomOutUpLarge; animation-name: zoomOutUpLarge } @-webkit-keyframes zoomOutDownLarge { 0% { opacity: 1; -webkit-transform: scale(1) translateY(0) } 100% { opacity: 0; -webkit-transform: scale(0) translateY(1000px) } } @-moz-keyframes zoomOutDownLarge { 0% { opacity: 1; -moz-transform: scale(1) translateY(0) } 100% { opacity: 0; -moz-transform: scale(0) translateY(1000px) } } @-ms-keyframes zoomOutDownLarge { 0% { opacity: 1; -ms-transform: scale(1) translateY(0) } 100% { opacity: 0; -ms-transform: scale(0) translateY(1000px) } } @-o-keyframes zoomOutDownLarge { 0% { opacity: 1; -o-transform: scale(1) translateY(0) } 100% { opacity: 0; -o-transform: scale(0) translateY(1000px) } } @keyframes zoomOutDownLarge { 0% { opacity: 1; transform: scale(1) translateY(0) } 100% { opacity: 0; transform: scale(0) translateY(1000px) } } . animate . zoomOutDownLarge, . trigger . zoomOutDownLarge { -webkit-animation-name: zoomOutDownLarge; -moz-animation-name: zoomOutDownLarge; -ms-animation-name: zoomOutDownLarge; -o-animation-name: zoomOutDownLarge; animation-name: zoomOutDownLarge } @-webkit-keyframes zoomOutLeftLarge { 0% { opacity: 0; -webkit-transform: scale(0) translateX(0) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(-1000px) } } @-moz-keyframes zoomOutLeftLarge { 0% { opacity: 0; -moz-transform: scale(0) translateX(0) } 100% { opacity: 1; -moz-transform: scale(1) translateX(-1000px) } } @-ms-keyframes zoomOutLeftLarge { 0% { opacity: 0; -ms-transform: scale(0) translateX(0) } 100% { opacity: 1; -ms-transform: scale(1) translateX(-1000px) } } @-o-keyframes zoomOutLeftLarge { 0% { opacity: 0; -o-transform: scale(0) translateX(0) } 100% { opacity: 1; -o-transform: scale(1) translateX(-1000px) } } @keyframes zoomOutLeftLarge { 0% { opacity: 0; transform: scale(0) translateX(0) } 100% { opacity: 1; transform: scale(1) translateX(-1000px) } } . animate . zoomOutLeftLarge, . trigger . zoomOutLeftLarge { -webkit-animation-name: zoomOutLeftLarge; -moz-animation-name: zoomOutLeftLarge; -ms-animation-name: zoomOutLeftLarge; -o-animation-name: zoomOutLeftLarge; animation-name: zoomOutLeftLarge } @-webkit-keyframes zoomOutRightLarge { 0% { opacity: 0; -webkit-transform: scale(0) translateX(0) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(1000px) } } @-moz-keyframes zoomOutRightLarge { 0% { opacity: 0; -moz-transform: scale(0) translateX(0) } 100% { opacity: 1; -moz-transform: scale(1) translateX(1000px) } } @-ms-keyframes zoomOutRightLarge { 0% { opacity: 0; -ms-transform: scale(0) translateX(0) } 100% { opacity: 1; -ms-transform: scale(1) translateX(1000px) } } @-o-keyframes zoomOutRightLarge { 0% { opacity: 0; -o-transform: scale(0) translateX(0) } 100% { opacity: 1; -o-transform: scale(1) translateX(1000px) } } @keyframes zoomOutRightLarge { 0% { opacity: 0; transform: scale(0) translateX(0) } 100% { opacity: 1; transform: scale(1) translateX(1000px) } } . animate . zoomOutRightLarge, . trigger . zoomOutRightLarge { -webkit-animation-name: zoomOutRightLarge; -moz-animation-name: zoomOutRightLarge; -ms-animation-name: zoomOutRightLarge; -o-animation-name: zoomOutRightLarge; animation-name: zoomOutRightLarge } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0) } 50% { opacity: 1; -webkit-transform: scale(1.1) } 70% { opacity: 1; -webkit-transform: scale(.9) } 100% { opacity: 1; -webkit-transform: scale(1) } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(0) } 50% { opacity: 1; -moz-transform: scale(1.1) } 70% { opacity: 1; -moz-transform: scale(.9) } 100% { opacity: 1; -moz-transform: scale(1) } } @-ms-keyframes bounceIn { 0% { opacity: 0; -ms-transform: scale(0) } 50% { opacity: 1; -ms-transform: scale(1.1) } 70% { opacity: 1; -ms-transform: scale(.9) } 100% { opacity: 1; -ms-transform: scale(1) } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(0) } 50% { opacity: 1; -o-transform: scale(1.1) } 70% { opacity: 1; -o-transform: scale(.9) } 100% { opacity: 1; -o-transform: scale(1) } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0) } 50% { opacity: 1; transform: scale(1.1) } 70% { opacity: 1; transform: scale(.9) } 100% { opacity: 1; transform: scale(1) } } . animate . bounceIn, . trigger . bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -ms-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: scale(0) translateY(200px) } 60% { opacity: 1; -webkit-transform: scale(1.1) translateY(-40px) } 80% { opacity: 1; -webkit-transform: scale(.9) translateY(20px) } 100% { opacity: 1; -webkit-transform: scale(1) translateY(0) } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: scale(0) translateY(200px) } 60% { opacity: 1; -moz-transform: scale(1.1) translateY(-40px) } 80% { opacity: 1; -moz-transform: scale(.9) translateY(20px) } 100% { opacity: 1; -moz-transform: scale(1) translateY(0) } } @-ms-keyframes bounceInUp { 0% { opacity: 0; -ms-transform: scale(0) translateY(200px) } 60% { opacity: 1; -ms-transform: scale(1.1) translateY(-40px) } 80% { opacity: 1; -ms-transform: scale(.9) translateY(20px) } 100% { opacity: 1; -ms-transform: scale(1) translateY(0) } } @-o-keyframes bounceInUp { 0% { opacity: 0; -o-transform: scale(0) translateY(200px) } 60% { opacity: 1; -o-transform: scale(1.1) translateY(-40px) } 80% { opacity: 1; -o-transform: scale(.9) translateY(20px) } 100% { opacity: 1; -o-transform: scale(1) translateY(0) } } @keyframes bounceInUp { 0% { opacity: 0; transform: scale(0) translateY(200px) } 60% { opacity: 1; transform: scale(1.1) translateY(-40px) } 80% { opacity: 1; transform: scale(.9) translateY(20px) } 100% { opacity: 1; transform: scale(1) translateY(0) } } . animate . bounceInUp, . trigger . bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -ms-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: scale(0) translateY(-200px) } 60% { opacity: 1; -webkit-transform: scale(1.1) translateY(40px) } 80% { opacity: 1; -webkit-transform: scale(.9) translateY(-20px) } 100% { opacity: 1; -webkit-transform: scale(1) translateY(0) } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: scale(0) translateY(-200px) } 60% { opacity: 1; -moz-transform: scale(1.1) translateY(40px) } 80% { opacity: 1; -moz-transform: scale(.9) translateY(-20px) } 100% { opacity: 1; -moz-transform: scale(1) translateY(0) } } @-ms-keyframes bounceInDown { 0% { opacity: 0; -ms-transform: scale(0) translateY(-200px) } 60% { opacity: 1; -ms-transform: scale(1.1) translateY(40px) } 80% { opacity: 1; -ms-transform: scale(.9) translateY(-20px) } 100% { opacity: 1; -ms-transform: scale(1) translateY(0) } } @-o-keyframes bounceInDown { 0% { opacity: 0; -o-transform: scale(0) translateY(-200px) } 60% { opacity: 1; -o-transform: scale(1.1) translateY(40px) } 80% { opacity: 1; -o-transform: scale(.9) translateY(-20px) } 100% { opacity: 1; -o-transform: scale(1) translateY(0) } } @keyframes bounceInDown { 0% { opacity: 0; transform: scale(0) translateY(-200px) } 60% { opacity: 1; transform: scale(1.1) translateY(40px) } 80% { opacity: 1; transform: scale(.9) translateY(-20px) } 100% { opacity: 1; transform: scale(1) translateY(0) } } . animate . bounceInDown, . trigger . bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -ms-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: scale(0) translateX(-200px) } 60% { opacity: 1; -webkit-transform: scale(1.1) translateX(40px) } 80% { opacity: 1; -webkit-transform: scale(.9) translateX(-20px) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(0) } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: scale(0) translateX(-200px) } 60% { opacity: 1; -moz-transform: scale(1.1) translateX(40px) } 80% { opacity: 1; -moz-transform: scale(.9) translateX(-20px) } 100% { opacity: 1; -moz-transform: scale(1) translateX(0) } } @-ms-keyframes bounceInLeft { 0% { opacity: 0; -ms-transform: scale(0) translateX(-200px) } 60% { opacity: 1; -ms-transform: scale(1.1) translateX(40px) } 80% { opacity: 1; -ms-transform: scale(.9) translateX(-20px) } 100% { opacity: 1; -ms-transform: scale(1) translateX(0) } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -o-transform: scale(0) translateX(-200px) } 60% { opacity: 1; -o-transform: scale(1.1) translateX(40px) } 80% { opacity: 1; -o-transform: scale(.9) translateX(-20px) } 100% { opacity: 1; -o-transform: scale(1) translateX(0) } } @keyframes bounceInLeft { 0% { opacity: 0; transform: scale(0) translateX(-200px) } 60% { opacity: 1; transform: scale(1.1) translateX(40px) } 80% { opacity: 1; transform: scale(.9) translateX(-20px) } 100% { opacity: 1; transform: scale(1) translateX(0) } } . animate . bounceInLeft, . trigger . bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -ms-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: scale(0) translateX(200px) } 60% { opacity: 1; -webkit-transform: scale(1.1) translateX(-40px) } 80% { opacity: 1; -webkit-transform: scale(.9) translateX(20px) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(0) } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: scale(0) translateX(200px) } 60% { opacity: 1; -moz-transform: scale(1.1) translateX(-40px) } 80% { opacity: 1; -moz-transform: scale(.9) translateX(20px) } 100% { opacity: 1; -moz-transform: scale(1) translateX(0) } } @-ms-keyframes bounceInRight { 0% { opacity: 0; -ms-transform: scale(0) translateX(200px) } 60% { opacity: 1; -ms-transform: scale(1.1) translateX(-40px) } 80% { opacity: 1; -ms-transform: scale(.9) translateX(20px) } 100% { opacity: 1; -ms-transform: scale(1) translateX(0) } } @-o-keyframes bounceInRight { 0% { opacity: 0; -o-transform: scale(0) translateX(200px) } 60% { opacity: 1; -o-transform: scale(1.1) translateX(-40px) } 80% { opacity: 1; -o-transform: scale(.9) translateX(20px) } 100% { opacity: 1; -o-transform: scale(1) translateX(0) } } @keyframes bounceInRight { 0% { opacity: 0; transform: scale(0) translateX(200px) } 60% { opacity: 1; transform: scale(1.1) translateX(-40px) } 80% { opacity: 1; transform: scale(.9) translateX(20px) } 100% { opacity: 1; transform: scale(1) translateX(0) } } . animate . bounceInRight, . trigger . bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -ms-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight } @-webkit-keyframes bounceOut { 0% { opacity: 1; -webkit-transform: scale(1) } 30% { opacity: 1; -webkit-transform: scale(1.1) } 50% { opacity: 0; -webkit-transform: scale(.9) } 100% { opacity: 0; -webkit-transform: scale(0) } } @-moz-keyframes bounceOut { 0% { opacity: 1; -moz-transform: scale(1) } 30% { opacity: 1; -moz-transform: scale(1.1) } 50% { opacity: 0; -moz-transform: scale(.9) } 100% { opacity: 0; -moz-transform: scale(0) } } @-ms-keyframes bounceOut { 0% { opacity: 1; -ms-transform: scale(1) } 30% { opacity: 1; -ms-transform: scale(1.1) } 50% { opacity: 0; -ms-transform: scale(.9) } 100% { opacity: 0; -ms-transform: scale(0) } } @-o-keyframes bounceOut { 0% { opacity: 1; -o-transform: scale(1) } 30% { opacity: 1; -o-transform: scale(1.1) } 50% { opacity: 0; -o-transform: scale(.9) } 100% { opacity: 0; -o-transform: scale(0) } } @keyframes bounceOut { 0% { opacity: 1; transform: scale(1) } 30% { opacity: 1; transform: scale(1.1) } 50% { opacity: 0; transform: scale(.9) } 100% { opacity: 0; transform: scale(0) } } . animate . bounceOut, . trigger . bounceOut { -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -ms-animation-name: bounceOut; -o-animation-name: bounceOut; animation-name: bounceOut } @-webkit-keyframes bounceOutUp { 0% { opacity: 1; -webkit-transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(40px) } 100% { opacity: 0; -webkit-transform: translateY(-200px) } } @-moz-keyframes bounceOutUp { 0% { opacity: 1; -moz-transform: translateY(0) } 20% { opacity: 1; -moz-transform: translateY(40px) } 100% { opacity: 0; -moz-transform: translateY(-200px) } } @-ms-keyframes bounceOutUp { 0% { opacity: 1; -ms-transform: translateY(0) } 20% { opacity: 1; -ms-transform: translateY(40px) } 100% { opacity: 0; -ms-transform: translateY(-200px) } } @-o-keyframes bounceOutUp { 0% { opacity: 1; -o-transform: translateY(0) } 20% { opacity: 1; -o-transform: translateY(40px) } 100% { opacity: 0; -o-transform: translateY(-200px) } } @keyframes bounceOutUp { 0% { opacity: 1; transform: translateY(0) } 20% { opacity: 1; transform: translateY(40px) } 100% { opacity: 0; transform: translateY(-200px) } } . animate . bounceOutUp, . trigger . bounceOutUp { -webkit-animation-name: bounceOutUp; -moz-animation-name: bounceOutUp; -ms-animation-name: bounceOutUp; -o-animation-name: bounceOutUp; animation-name: bounceOutUp } @-webkit-keyframes bounceOutDown { 0% { opacity: 1; -webkit-transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(-40px) } 100% { opacity: 0; -webkit-transform: translateY(200px) } } @-moz-keyframes bounceOutDown { 0% { opacity: 1; -moz-transform: translateY(0) } 20% { opacity: 1; -moz-transform: translateY(-40px) } 100% { opacity: 0; -moz-transform: translateY(200px) } } @-ms-keyframes bounceOutDown { 0% { opacity: 1; -ms-transform: translateY(0) } 20% { opacity: 1; -ms-transform: translateY(-40px) } 100% { opacity: 0; -ms-transform: translateY(200px) } } @-o-keyframes bounceOutDown { 0% { opacity: 1; -o-transform: translateY(0) } 20% { opacity: 1; -o-transform: translateY(-40px) } 100% { opacity: 0; -o-transform: translateY(200px) } } @keyframes bounceOutDown { 0% { opacity: 1; transform: translateY(0) } 20% { opacity: 1; transform: translateY(-40px) } 100% { opacity: 0; transform: translateY(200px) } } . animate . bounceOutDown, . trigger . bounceOutDown { -webkit-animation-name: bounceOutDown; -moz-animation-name: bounceOutDown; -ms-animation-name: bounceOutDown; -o-animation-name: bounceOutDown; animation-name: bounceOutDown } @-webkit-keyframes bounceOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0) } 20% { opacity: 1; -webkit-transform: translateX(40px) } 100% { opacity: 0; -webkit-transform: translateX(-200px) } } @-moz-keyframes bounceOutLeft { 0% { opacity: 1; -moz-transform: translateX(0) } 20% { opacity: 1; -moz-transform: translateX(40px) } 100% { opacity: 0; -moz-transform: translateX(-200px) } } @-ms-keyframes bounceOutLeft { 0% { opacity: 1; -ms-transform: translateX(0) } 20% { opacity: 1; -ms-transform: translateX(40px) } 100% { opacity: 0; -ms-transform: translateX(-200px) } } @-o-keyframes bounceOutLeft { 0% { opacity: 1; -o-transform: translateX(0) } 20% { opacity: 1; -o-transform: translateX(40px) } 100% { opacity: 0; -o-transform: translateX(-200px) } } @keyframes bounceOutLeft { 0% { opacity: 1; transform: translateX(0) } 20% { opacity: 1; transform: translateX(40px) } 100% { opacity: 0; transform: translateX(-200px) } } . animate . bounceOutLeft, . trigger . bounceOutLeft { -webkit-animation-name: bounceOutLeft; -moz-animation-name: bounceOutLeft; -ms-animation-name: bounceOutLeft; -o-animation-name: bounceOutLeft; animation-name: bounceOutLeft } @-webkit-keyframes bounceOutRight { 0% { opacity: 1; -webkit-transform: translateX(0) } 20% { opacity: 1; -webkit-transform: translateX(-40px) } 100% { opacity: 0; -webkit-transform: translateX(200px) } } @-moz-keyframes bounceOutRight { 0% { opacity: 1; -moz-transform: translateX(0) } 20% { opacity: 1; -moz-transform: translateX(-40px) } 100% { opacity: 0; -moz-transform: translateX(200px) } } @-ms-keyframes bounceOutRight { 0% { opacity: 1; -ms-transform: translateX(0) } 20% { opacity: 1; -ms-transform: translateX(-40px) } 100% { opacity: 0; -ms-transform: translateX(200px) } } @-o-keyframes bounceOutRight { 0% { opacity: 1; -o-transform: translateX(0) } 20% { opacity: 1; -o-transform: translateX(-40px) } 100% { opacity: 0; -o-transform: translateX(200px) } } @keyframes bounceOutRight { 0% { opacity: 1; transform: translateX(0) } 20% { opacity: 1; transform: translateX(-40px) } 100% { opacity: 0; transform: translateX(200px) } } . animate . bounceOutRight, . trigger . bounceOutRight { -webkit-animation-name: bounceOutRight; -moz-animation-name: bounceOutRight; -ms-animation-name: bounceOutRight; -o-animation-name: bounceOutRight; animation-name: bounceOutRight } @-webkit-keyframes spinLeft { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-380deg); opacity: 0 } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes spinLeft { 0% { -moz-transform-origin: center center; -moz-transform: rotate(-380deg); opacity: 0 } 100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1 } } @-ms-keyframes spinLeft { 0% { -ms-transform-origin: center center; -ms-transform: rotate(-380deg); opacity: 0 } 100% { -ms-transform-origin: center center; -ms-transform: rotate(0); opacity: 1 } } @-o-keyframes spinLeft { 0% { -o-transform-origin: center center; -o-transform: rotate(-380deg); opacity: 0 } 100% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1 } } @keyframes spinLeft { 0% { transform-origin: center center; transform: rotate(-380deg); opacity: 0 } 100% { transform-origin: center center; transform: rotate(0); opacity: 1 } } . animate . spinLeft, . trigger . spinLeft { -webkit-animation-name: spinLeft; -moz-animation-name: spinLeft; -ms-animation-name: spinLeft; -o-animation-name: spinLeft; animation-name: spinLeft } @-webkit-keyframes spinRight { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(380deg); opacity: 0 } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes spinRight { 0% { -moz-transform-origin: center center; -moz-transform: rotate(380deg); opacity: 0 } 100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1 } } @-ms-keyframes spinRight { 0% { -ms-transform-origin: center center; -ms-transform: rotate(380deg); opacity: 0 } 100% { -ms-transform-origin: center center; -ms-transform: rotate(0); opacity: 1 } } @-o-keyframes spinRight { 0% { -o-transform-origin: center center; -o-transform: rotate(380deg); opacity: 0 } 100% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1 } } @keyframes spinRight { 0% { transform-origin: center center; transform: rotate(380deg); opacity: 0 } 100% { transform-origin: center center; transform: rotate(0); opacity: 1 } } . animate . spinRight, . trigger . spinRight { -webkit-animation-name: spinRight; -moz-animation-name: spinRight; -ms-animation-name: spinRight; -o-animation-name: spinRight; animation-name: spinRight } @-webkit-keyframes flash { 0%, 100%, 50% { opacity: 1 } 25%, 75% { opacity: 0 } } @-moz-keyframes flash { 0%, 100%, 50% { opacity: 1 } 25%, 75% { opacity: 0 } } @-ms-keyframes flash { 0%, 100%, 50% { opacity: 1 } 25%, 75% { opacity: 0 } } @-o-keyframes flash { 0%, 100%, 50% { opacity: 1 } 25%, 75% { opacity: 0 } } @keyframes flash { 0%, 100%, 50% { opacity: 1 } 25%, 75% { opacity: 0 } } . animate . flash, . onHoverFlash: hover, . trigger . flash { -webkit-animation-name: flash; -moz-animation-name: flash; -ms-animation-name: flash; -o-animation-name: flash; animation-name: flash } @-webkit-keyframes strobe { 0%, 100%, 20%, 40%, 60%, 80% { opacity: 1 } 10%, 30%, 50%, 70%, 90% { opacity: 0 } } @-moz-keyframes strobe { 0%, 100%, 20%, 40%, 60%, 80% { opacity: 1 } 10%, 30%, 50%, 70%, 90% { opacity: 0 } } @-ms-keyframes strobe { 0%, 100%, 20%, 40%, 60%, 80% { opacity: 1 } 10%, 30%, 50%, 70%, 90% { opacity: 0 } } @-o-keyframes strobe { 0%, 100%, 20%, 40%, 60%, 80% { opacity: 1 } 10%, 30%, 50%, 70%, 90% { opacity: 0 } } @keyframes strobe { 0%, 100%, 20%, 40%, 60%, 80% { opacity: 1 } 10%, 30%, 50%, 70%, 90% { opacity: 0 } } . animate . strobe, . onHoverStrobe: hover, . trigger . strobe { -webkit-animation-name: strobe; -moz-animation-name: strobe; -ms-animation-name: strobe; -o-animation-name: strobe; animation-name: strobe } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px) } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px) } } @-moz-keyframes shake { 0%, 100% { -moz-transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px) } 20%, 40%, 60%, 80% { -moz-transform: translateX(10px) } } @-ms-keyframes shake { 0%, 100% { -ms-transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -ms-transform: translateX(-10px) } 20%, 40%, 60%, 80% { -ms-transform: translateX(10px) } } @-o-keyframes shake { 0%, 100% { -o-transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -o-transform: translateX(-10px) } 20%, 40%, 60%, 80% { -o-transform: translateX(10px) } } @keyframes shake { 0%, 100% { transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px) } 20%, 40%, 60%, 80% { transform: translateX(10px) } } . animate . shake, . onHoverShake: hover, . trigger . shake { -webkit-animation-name: shake; -moz-animation-name: shake; -ms-animation-name: shake; -o-animation-name: shake; animation-name: shake } @-webkit-keyframes bounce { 0%, 100%, 20%, 50%, 80% { -webkit-transform: translateY(0) } 40% { -webkit-transform: translateY(-30px) } 60% { -webkit-transform: translateY(-15px) } } @-moz-keyframes bounce { 0%, 100%, 20%, 50%, 80% { -moz-transform: translateY(0) } 40% { -moz-transform: translateY(-30px) } 60% { -moz-transform: translateY(-15px) } } @-ms-keyframes bounce { 0%, 100%, 20%, 50%, 80% { -ms-transform: translateY(0) } 40% { -ms-transform: translateY(-30px) } 60% { -ms-transform: translateY(-15px) } } @-o-keyframes bounce { 0%, 100%, 20%, 50%, 80% { -o-transform: translateY(0) } 40% { -o-transform: translateY(-30px) } 60% { -o-transform: translateY(-15px) } } @keyframes bounce { 0%, 100%, 20%, 50%, 80% { transform: translateY(0) } 40% { transform: translateY(-30px) } 60% { transform: translateY(-15px) } } . animate . bounce, . onHoverBounce: hover, . trigger . bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; -ms-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce } @-webkit-keyframes tada { 0%, 100% { -webkit-transform: scale(1) rotate(0) } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg) } } @-moz-keyframes tada { 0%, 100% { -moz-transform: scale(1) rotate(0) } 10%, 20% { -moz-transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { -moz-transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { -moz-transform: scale(1.1) rotate(-3deg) } } @-ms-keyframes tada { 0%, 100% { -ms-transform: scale(1) rotate(0) } 10%, 20% { -ms-transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { -ms-transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { -ms-transform: scale(1.1) rotate(-3deg) } } @-o-keyframes tada { 0%, 100% { -o-transform: scale(1) rotate(0) } 10%, 20% { -o-transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { -o-transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { -o-transform: scale(1.1) rotate(-3deg) } } @keyframes tada { 0%, 100% { transform: scale(1) rotate(0) } 10%, 20% { transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg) } } . animate . tada, . onHoverTada: hover, . trigger . tada { -webkit-animation-name: tada; -moz-animation-name: tada; -ms-animation-name: tada; -o-animation-name: tada; animation-name: tada } @-webkit-keyframes wave { 20% { -webkit-transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg) } 100% { -webkit-transform: rotate(0deg) } } @-moz-keyframes wave { 20% { -moz-transform: rotate(15deg) } 40% { -moz-transform: rotate(-10deg) } 60% { -moz-transform: rotate(5deg) } 80% { -moz-transform: rotate(-5deg) } 100% { -moz-transform: rotate(0deg) } } @-ms-keyframes wave { 20% { -ms-transform: rotate(15deg) } 40% { -ms-transform: rotate(-10deg) } 60% { -ms-transform: rotate(5deg) } 80% { -ms-transform: rotate(-5deg) } 100% { -ms-transform: rotate(0deg) } } @-o-keyframes wave { 20% { -o-transform: rotate(15deg) } 40% { -o-transform: rotate(-10deg) } 60% { -o-transform: rotate(5deg) } 80% { -o-transform: rotate(-5deg) } 100% { -o-transform: rotate(0deg) } } @keyframes wave { 20% { transform: rotate(15deg) } 40% { transform: rotate(-10deg) } 60% { transform: rotate(5deg) } 80% { transform: rotate(-5deg) } 100% { transform: rotate(0deg) } } . animate . wave, . onHoverWave: hover, . trigger . wave { -webkit-animation-name: wave; -moz-animation-name: wave; -ms-animation-name: wave; -o-animation-name: wave; animation-name: wave } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg) } 100% { -webkit-transform: rotate(360deg) } } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg) } 100% { -moz-transform: rotate(360deg) } } @-ms-keyframes spin { 0% { -ms-transform: rotate(0deg) } 100% { -ms-transform: rotate(360deg) } } @-o-keyframes spin { 0% { -o-transform: rotate(0deg) } 100% { -o-transform: rotate(360deg) } } @keyframes spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } } . animate . spin, . onHoverSpin: hover, . trigger . spin { -webkit-animation-name: spin; -moz-animation-name: spin; -ms-animation-name: spin; -o-animation-name: spin; animation-name: spin } @-webkit-keyframes pullback { 0% { -webkit-transform: rotate(0deg) } 20%, 30% { -webkit-transform: rotate(-45deg) } 100% { -webkit-transform: rotate(360deg) } } @-moz-keyframes pullback { 0% { -moz-transform: rotate(0deg) } 20%, 30% { -moz-transform: rotate(-45deg) } 100% { -moz-transform: rotate(360deg) } } @-ms-keyframes pullback { 0% { -ms-transform: rotate(0deg) } 20%, 30% { -ms-transform: rotate(-45deg) } 100% { -ms-transform: rotate(360deg) } } @-o-keyframes pullback { 0% { -o-transform: rotate(0deg) } 20%, 30% { -o-transform: rotate(-45deg) } 100% { -o-transform: rotate(360deg) } } @keyframes pullback { 0% { transform: rotate(0deg) } 20%, 30% { transform: rotate(-45deg) } 100% { transform: rotate(360deg) } } . animate . pullback, . onHoverPullback: hover, . trigger . pullback { -webkit-animation-name: pullback; -moz-animation-name: pullback; -ms-animation-name: pullback; -o-animation-name: pullback; animation-name: pullback } @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0px) } 15% { -webkit-transform: translateX(-25px) rotate(-5deg) } 30% { -webkit-transform: translateX(20px) rotate(3deg) } 45% { -webkit-transform: translateX(-15px) rotate(-3deg) } 60% { -webkit-transform: translateX(10px) rotate(2deg) } 75% { -webkit-transform: translateX(-5px) rotate(-1deg) } 100% { -webkit-transform: translateX(0px) } } @-moz-keyframes wobble { 0% { -moz-transform: translateX(0px) } 15% { -moz-transform: translateX(-25px) rotate(-5deg) } 30% { -moz-transform: translateX(20px) rotate(3deg) } 45% { -moz-transform: translateX(-15px) rotate(-3deg) } 60% { -moz-transform: translateX(10px) rotate(2deg) } 75% { -moz-transform: translateX(-5px) rotate(-1deg) } 100% { -moz-transform: translateX(0px) } } @-ms-keyframes wobble { 0% { -ms-transform: translateX(0px) } 15% { -ms-transform: translateX(-25px) rotate(-5deg) } 30% { -ms-transform: translateX(20px) rotate(3deg) } 45% { -ms-transform: translateX(-15px) rotate(-3deg) } 60% { -ms-transform: translateX(10px) rotate(2deg) } 75% { -ms-transform: translateX(-5px) rotate(-1deg) } 100% { -ms-transform: translateX(0px) } } @-o-keyframes wobble { 0% { -o-transform: translateX(0px) } 15% { -o-transform: translateX(-25px) rotate(-5deg) } 30% { -o-transform: translateX(20px) rotate(3deg) } 45% { -o-transform: translateX(-15px) rotate(-3deg) } 60% { -o-transform: translateX(10px) rotate(2deg) } 75% { -o-transform: translateX(-5px) rotate(-1deg) } 100% { -o-transform: translateX(0px) } } @keyframes wobble { 0% { transform: translateX(0px) } 15% { transform: translateX(-25px) rotate(-5deg) } 30% { transform: translateX(20px) rotate(3deg) } 45% { transform: translateX(-15px) rotate(-3deg) } 60% { transform: translateX(10px) rotate(2deg) } 75% { transform: translateX(-5px) rotate(-1deg) } 100% { transform: translateX(0px) } } . animate . wobble, . onHoverWobble: hover, . trigger . wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -ms-animation-name: wobble; -o-animation-name: wobble; animation-name: wobble } @-webkit-keyframes pulse { 0%, 100% { -webkit-transform: scale(1) } 50% { -webkit-transform: scale(1.1) } } @-moz-keyframes pulse { 0%, 100% { -moz-transform: scale(1) } 50% { -moz-transform: scale(1.1) } } @-ms-keyframes pulse { 0%, 100% { -ms-transform: scale(1) } 50% { -ms-transform: scale(1.1) } } @-o-keyframes pulse { 0%, 100% { -o-transform: scale(1) } 50% { -o-transform: scale(1.1) } } @keyframes pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.1) } } . animate . pulse, . onHoverPulse: hover, . trigger . pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; -ms-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse } @-webkit-keyframes pulsate { 0%, 100%, 50% { -webkit-transform: scale(1) } 25%, 75% { -webkit-transform: scale(1.1) } } @-moz-keyframes pulsate { 0%, 100%, 50% { -moz-transform: scale(1) } 25%, 75% { -moz-transform: scale(1.1) } } @-ms-keyframes pulsate { 0%, 100%, 50% { -ms-transform: scale(1) } 25%, 75% { -ms-transform: scale(1.1) } } @-o-keyframes pulsate { 0%, 100%, 50% { -o-transform: scale(1) } 25%, 75% { -o-transform: scale(1.1) } } @keyframes pulsate { 0%, 100%, 50% { transform: scale(1) } 25%, 75% { transform: scale(1.1) } } . animate . pulsate, . onHoverPulsate: hover, . trigger . pulsate { -webkit-animation-name: pulsate; -moz-animation-name: pulsate; -ms-animation-name: pulsate; -o-animation-name: pulsate; animation-name: pulsate } @-webkit-keyframes heartbeat { 0%, 30%, 50%, 60%, 80% { -webkit-transform: scale(1) } 40%, 70% { -webkit-transform: scale(1.1) } } @-moz-keyframes heartbeat { 0%, 30%, 50%, 60%, 80% { -moz-transform: scale(1) } 40%, 70% { -moz-transform: scale(1.1) } } @-ms-keyframes heartbeat { 0%, 30%, 50%, 60%, 80% { -ms-transform: scale(1) } 40%, 70% { -ms-transform: scale(1.1) } } @-o-keyframes heartbeat { 0%, 30%, 50%, 60%, 80% { -o-transform: scale(1) } 40%, 70% { -o-transform: scale(1.1) } } @keyframes heartbeat { 0%, 30%, 50%, 60%, 80% { transform: scale(1) } 40%, 70% { transform: scale(1.1) } } . animate . heartbeat, . onHoverHeartbeat: hover, . trigger . heartbeat { -webkit-animation-name: heartbeat; -moz-animation-name: heartbeat; -ms-animation-name: heartbeat; -o-animation-name: heartbeat; animation-name: heartbeat } @-webkit-keyframes panic { 0%, 100% { -webkit-transform: scale(1) rotate(0) } 10%, 60% { -webkit-transform: scale(1.1) rotate(-3deg) } 20%, 40% { -webkit-transform: scale(1) rotate(-3deg) } 30% { -webkit-transform: scale(1.1) rotate(3deg) } 50%, 70%, 90% { -webkit-transform: scale(1) rotate(3deg) } 80% { -webkit-transform: scale(1.1) rotate(-3deg) } } @-moz-keyframes panic { 0%, 100% { -moz-transform: scale(1) rotate(0) } 10%, 60% { -moz-transform: scale(1.1) rotate(-3deg) } 20%, 40% { -moz-transform: scale(1) rotate(-3deg) } 30% { -moz-transform: scale(1.1) rotate(3deg) } 50%, 70%, 90% { -moz-transform: scale(1) rotate(3deg) } 80% { -moz-transform: scale(1.1) rotate(-3deg) } } @-ms-keyframes panic { 0%, 100% { -ms-transform: scale(1) rotate(0) } 10%, 60% { -ms-transform: scale(1.1) rotate(-3deg) } 20%, 40% { -ms-transform: scale(1) rotate(-3deg) } 30% { -ms-transform: scale(1.1) rotate(3deg) } 50%, 70%, 90% { -ms-transform: scale(1) rotate(3deg) } 80% { -ms-transform: scale(1.1) rotate(-3deg) } } @-o-keyframes panic { 0%, 100% { -o-transform: scale(1) rotate(0) } 10%, 60% { -o-transform: scale(1.1) rotate(-3deg) } 20%, 40% { -o-transform: scale(1) rotate(-3deg) } 30% { -o-transform: scale(1.1) rotate(3deg) } 50%, 70%, 90% { -o-transform: scale(1) rotate(3deg) } 80% { -o-transform: scale(1.1) rotate(-3deg) } } @keyframes panic { 0%, 100% { transform: scale(1) rotate(0) } 10%, 60% { transform: scale(1.1) rotate(-3deg) } 20%, 40% { transform: scale(1) rotate(-3deg) } 30% { transform: scale(1.1) rotate(3deg) } 50%, 70%, 90% { transform: scale(1) rotate(3deg) } 80% { transform: scale(1.1) rotate(-3deg) } } . animate . panic, . onHoverPanic: hover, . trigger . panic { -webkit-animation-name: panic; -moz-animation-name: panic; -ms-animation-name: panic; -o-animation-name: panic; animation-name: panic } @-webkit-keyframes explode { 0% { -webkit-transform: scale(1) } 20% { -webkit-transform: scale(.3) rotate(-3deg) } 60% { -webkit-transform: scale(.3) rotate(-5deg) } 30% { -webkit-transform: scale(.4) rotate(8deg) } 40% { -webkit-transform: scale(.3) rotate(-11deg) } 50% { -webkit-transform: scale(.4) rotate(14deg) } 70% { -webkit-transform: scale(.2) rotate(17deg) } 80% { opacity: 1; -webkit-transform: scale(.2) rotate(-20deg) } 100% { opacity: 0; -webkit-transform: scale(10) rotate(360deg) } } @-moz-keyframes explode { 0% { opacity: 1; -moz-transform: scale(1) } 20% { -moz-transform: scale(.3) rotate(-3deg) } 60% { -moz-transform: scale(.3) rotate(-5deg) } 30% { -moz-transform: scale(.4) rotate(8deg) } 40% { -moz-transform: scale(.3) rotate(-11deg) } 50% { -moz-transform: scale(.4) rotate(14deg) } 70% { -moz-transform: scale(.2) rotate(17deg) } 80% { opacity: 1; -moz-transform: scale(.2) rotate(-20deg) } 100% { opacity: 0; -moz-transform: scale(10) rotate(360deg) } } @-ms-keyframes explode { 0% { opacity: 1; -ms-transform: scale(1) } 20% { -ms-transform: scale(.3) rotate(-3deg) } 60% { -ms-transform: scale(.3) rotate(-5deg) } 30% { -ms-transform: scale(.4) rotate(8deg) } 40% { -ms-transform: scale(.3) rotate(-11deg) } 50% { -ms-transform: scale(.4) rotate(14deg) } 70% { -ms-transform: scale(.2) rotate(17deg) } 80% { opacity: 1; -ms-transform: scale(.2) rotate(-20deg) } 100% { opacity: 0; -ms-transform: scale(10) rotate(360deg) } } @-o-keyframes explode { 0% { opacity: 1; -o-transform: scale(1) } 20% { -o-transform: scale(.3) rotate(-3deg) } 60% { -o-transform: scale(.3) rotate(-5deg) } 30% { -o-transform: scale(.4) rotate(8deg) } 40% { -o-transform: scale(.3) rotate(-11deg) } 50% { -o-transform: scale(.4) rotate(14deg) } 70% { -o-transform: scale(.2) rotate(17deg) } 80% { opacity: 1; -o-transform: scale(.2) rotate(-20deg) } 100% { opacity: 0; -o-transform: scale(10) rotate(360deg) } } @keyframes explode { 0% { opacity: 1; transform: scale(1) } 20% { transform: scale(.3) rotate(-3deg) } 60% { transform: scale(.3) rotate(-5deg) } 30% { transform: scale(.4) rotate(8deg) } 40% { transform: scale(.3) rotate(-11deg) } 50% { transform: scale(.4) rotate(14deg) } 70% { transform: scale(.2) rotate(17deg) } 80% { opacity: 1; transform: scale(.2) rotate(-20deg) } 100% { opacity: 0; transform: scale(10) rotate(360deg) } } . animate . explode, . trigger . explode { -webkit-animation-name: explode; -moz-animation-name: explode; -ms-animation-name: explode; -o-animation-name: explode; animation-name: explode } } @media screen and (-webkit-min-device-pixel-ratio: 0) { .animate, .onHoverBounce, .onHoverExplode, .onHoverFlash, .onHoverHeartbeat, .onHoverPanic, .onHoverPullback, .onHoverPulsate, .onHoverPulse, .onHoverShake, .onHoverSpin, .onHoverStrobe, .onHoverTada, .onHoverWave, .onHoverWobble, .trigger { opacity: 0; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -ms-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -ms-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both } .ie .animate, .no-js .animate, .onHoverBounce, .onHoverExplode, .onHoverFlash, .onHoverHeartbeat, .onHoverPanic, .onHoverPullback, .onHoverPulsate, .onHoverPulse, .onHoverShake, .onHoverSpin, .onHoverStrobe, .onHoverTada, .onHoverWave, .onHoverWobble, .trigger { opacity: 1 } .animate.infinite, .onHoverBounce.infinite, .onHoverExplode.infinite, .onHoverFlash.infinite, .onHoverHeartbeat.infinite, .onHoverPanic.infinite, .onHoverPullback.infinite, .onHoverPulsate.infinite, .onHoverPulse.infinite, .onHoverShake.infinite, .onHoverSpin.infinite, .onHoverStrobe.infinite, .onHoverTada.infinite, .onHoverWave.infinite, .onHoverWobble.infinite, .trigger.infinite { -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite } @-webkit-keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-moz-keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @-ms-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 } } .animate.fadeIn, .trigger.fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -ms-animation-name: fadeIn; -o-animation-name: fadeIn; animation-name: fadeIn } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(200px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(200px) } 100% { opacity: 1; -moz-transform: translateY(0) } } @-ms-keyframes fadeInUp { 0% { opacity: 0; -ms-transform: translateY(200px) } 100% { opacity: 1; -ms-transform: translateY(0) } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(200px) } 100% { opacity: 1; -o-transform: translateY(0) } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(200px) } 100% { opacity: 1; transform: translateY(0) } } .animate.fadeInUp, .trigger.fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -ms-animation-name: fadeInUp; -o-animation-name: fadeInUp; animation-name: fadeInUp } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-200px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-200px) } 100% { opacity: 1; -moz-transform: translateY(0) } } @-ms-keyframes fadeInDown { 0% { opacity: 0; -ms-transform: translateY(-200px) } 100% { opacity: 1; -ms-transform: translateY(0) } } @-o-keyframes fadeInDown { 0% { opacity: 0; -o-transform: translateY(-200px) } 100% { opacity: 1; -o-transform: translateY(0) } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-200px) } 100% { opacity: 1; transform: translateY(0) } } .animate.fadeInDown, .trigger.fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -ms-animation-name: fadeInDown; -o-animation-name: fadeInDown; animation-name: fadeInDown } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-200px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-200px) } 100% { opacity: 1; -moz-transform: translateX(0) } } @-ms-keyframes fadeInLeft { 0% { opacity: 0; -ms-transform: translateX(-200px) } 100% { opacity: 1; -ms-transform: translateX(0) } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-200px) } 100% { opacity: 1; -o-transform: translateX(0) } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-200px) } 100% { opacity: 1; transform: translateX(0) } } .animate.fadeInLeft, .trigger.fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -ms-animation-name: fadeInLeft; -o-animation-name: fadeInLeft; animation-name: fadeInLeft } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(200px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(200px) } 100% { opacity: 1; -moz-transform: translateX(0) } } @-ms-keyframes fadeInRight { 0% { opacity: 0; -ms-transform: translateX(200px) } 100% { opacity: 1; -ms-transform: translateX(0) } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(200px) } 100% { opacity: 1; -o-transform: translateX(0) } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(200px) } 100% { opacity: 1; transform: translateX(0) } } .animate.fadeInRight, .trigger.fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -ms-animation-name: fadeInRight; -o-animation-name: fadeInRight; animation-name: fadeInRight } @-webkit-keyframes fadeInUpLarge { 0% { opacity: 0; -webkit-transform: translateY(1000px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeInUpLarge { 0% { opacity: 0; -moz-transform: translateY(1000px) } 100% { opacity: 1; -moz-transform: translateY(0) } } @-ms-keyframes fadeInUpLarge { 0% { opacity: 0; -ms-transform: translateY(1000px) } 100% { opacity: 1; -ms-transform: translateY(0) } } @-o-keyframes fadeInUpLarge { 0% { opacity: 0; -o-transform: translateY(1000px) } 100% { opacity: 1; -o-transform: translateY(0) } } @keyframes fadeInUpLarge { 0% { opacity: 0; transform: translateY(1000px) } 100% { opacity: 1; transform: translateY(0) } } .animate.fadeInUpLarge, .trigger.fadeInUpLarge { -webkit-animation-name: fadeInUpLarge; -moz-animation-name: fadeInUpLarge; -ms-animation-name: fadeInUpLarge; -o-animation-name: fadeInUpLarge; animation-name: fadeInUpLarge } @-webkit-keyframes fadeInDownLarge { 0% { opacity: 0; -webkit-transform: translateY(-1000px) } 100% { opacity: 1; -webkit-transform: translateY(0) } } @-moz-keyframes fadeInDownLarge { 0% { opacity: 0; -moz-transform: translateY(-1000px) } 100% { opacity: 1; -moz-transform: translateY(0) } } @-ms-keyframes fadeInDownLarge { 0% { opacity: 0; -ms-transform: translateY(-1000px) } 100% { opacity: 1; -ms-transform: translateY(0) } } @-o-keyframes fadeInDownLarge { 0% { opacity: 0; -o-transform: translateY(-1000px) } 100% { opacity: 1; -o-transform: translateY(0) } } @keyframes fadeInDownLarge { 0% { opacity: 0; transform: translateY(-1000px) } 100% { opacity: 1; transform: translateY(0) } } .animate.fadeInDownLarge, .trigger.fadeInDownLarge { -webkit-animation-name: fadeInDownLarge; -moz-animation-name: fadeInDownLarge; -ms-animation-name: fadeInDownLarge; -o-animation-name: fadeInDownLarge; animation-name: fadeInDownLarge } @-webkit-keyframes fadeInLeftLarge { 0% { opacity: 0; -webkit-transform: translateX(-1000px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInLeftLarge { 0% { opacity: 0; -moz-transform: translateX(-1000px) } 100% { opacity: 1; -moz-transform: translateX(0) } } @-ms-keyframes fadeInLeftLarge { 0% { opacity: 0; -ms-transform: translateX(-1000px) } 100% { opacity: 1; -ms-transform: translateX(0) } } @-o-keyframes fadeInLeftLarge { 0% { opacity: 0; -o-transform: translateX(-1000px) } 100% { opacity: 1; -o-transform: translateX(0) } } @keyframes fadeInLeftLarge { 0% { opacity: 0; transform: translateX(-1000px) } 100% { opacity: 1; transform: translateX(0) } } .animate.fadeInLeftLarge, .trigger.fadeInLeftLarge { -webkit-animation-name: fadeInLeftLarge; -moz-animation-name: fadeInLeftLarge; -ms-animation-name: fadeInLeftLarge; -o-animation-name: fadeInLeftLarge; animation-name: fadeInLeftLarge } @-webkit-keyframes fadeInRightLarge { 0% { opacity: 0; -webkit-transform: translateX(1000px) } 100% { opacity: 1; -webkit-transform: translateX(0) } } @-moz-keyframes fadeInRightLarge { 0% { opacity: 0; -moz-transform: translateX(1000px) } 100% { opacity: 1; -moz-transform: translateX(0) } } @-ms-keyframes fadeInRightLarge { 0% { opacity: 0; -ms-transform: translateX(1000px) } 100% { opacity: 1; -ms-transform: translateX(0) } } @-o-keyframes fadeInRightLarge { 0% { opacity: 0; -o-transform: translateX(1000px) } 100% { opacity: 1; -o-transform: translateX(0) } } @keyframes fadeInRightLarge { 0% { opacity: 0; transform: translateX(1000px) } 100% { opacity: 1; transform: translateX(0) } } .animate.fadeInRightLarge, .trigger.fadeInRightLarge { -webkit-animation-name: fadeInRightLarge; -moz-animation-name: fadeInRightLarge; -ms-animation-name: fadeInRightLarge; -o-animation-name: fadeInRightLarge; animation-name: fadeInRightLarge } @-webkit-keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @-moz-keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @-ms-keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @-o-keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } @keyframes fadeOut { 0% { opacity: 1 } 100% { opacity: 0 } } .animate.fadeOut, .trigger.fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -ms-animation-name: fadeOut; -o-animation-name: fadeOut; animation-name: fadeOut } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-200px) } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(-200px) } } @-ms-keyframes fadeOutUp { 0% { opacity: 1; -ms-transform: translateY(0) } 100% { opacity: 0; -ms-transform: translateY(-200px) } } @-o-keyframes fadeOutUp { 0% { opacity: 1; -o-transform: translateY(0) } 100% { opacity: 0; -o-transform: translateY(-200px) } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(-200px) } } .animate.fadeOutUp, .trigger.fadeOutUp { -webkit-animation-name: fadeOutUp; -moz-animation-name: fadeOutUp; -ms-animation-name: fadeOutUp; -o-animation-name: fadeOutUp; animation-name: fadeOutUp } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(200px) } } @-moz-keyframes fadeOutDown { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(200px) } } @-ms-keyframes fadeOutDown { 0% { opacity: 1; -ms-transform: translateY(0) } 100% { opacity: 0; -ms-transform: translateY(200px) } } @-o-keyframes fadeOutDown { 0% { opacity: 1; -o-transform: translateY(0) } 100% { opacity: 0; -o-transform: translateY(200px) } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(200px) } } .animate.fadeOutDown, .trigger.fadeOutDown { -webkit-animation-name: fadeOutDown; -moz-animation-name: fadeOutDown; -ms-animation-name: fadeOutDown; -o-animation-name: fadeOutDown; animation-name: fadeOutDown } @-webkit-keyframes fadeOutLeft { 0% { opacity: 0; -webkit-transform: translateX(0) } 100% { opacity: 1; -webkit-transform: translateX(-200px) } } @-moz-keyframes fadeOutLeft { 0% { opacity: 0; -moz-transform: translateX(0) } 100% { opacity: 1; -moz-transform: translateX(-200px) } } @-ms-keyframes fadeOutLeft { 0% { opacity: 0; -ms-transform: translateX(0) } 100% { opacity: 1; -ms-transform: translateX(-200px) } } @-o-keyframes fadeOutLeft { 0% { opacity: 0; -o-transform: translateX(0) } 100% { opacity: 1; -o-transform: translateX(-200px) } } @keyframes fadeOutLeft { 0% { opacity: 0; transform: translateX(0) } 100% { opacity: 1; transform: translateX(-200px) } } .animate.fadeOutLeft, .trigger.fadeOutLeft { -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -ms-animation-name: fadeOutLeft; -o-animation-name: fadeOutLeft; animation-name: fadeOutLeft } @-webkit-keyframes fadeOutRight { 0% { opacity: 0; -webkit-transform: translateX(0) } 100% { opacity: 1; -webkit-transform: translateX(200px) } } @-moz-keyframes fadeOutRight { 0% { opacity: 0; -moz-transform: translateX(0) } 100% { opacity: 1; -moz-transform: translateX(200px) } } @-ms-keyframes fadeOutRight { 0% { opacity: 0; -ms-transform: translateX(0) } 100% { opacity: 1; -ms-transform: translateX(200px) } } @-o-keyframes fadeOutRight { 0% { opacity: 0; -o-transform: translateX(0) } 100% { opacity: 1; -o-transform: translateX(200px) } } @keyframes fadeOutRight { 0% { opacity: 0; transform: translateX(0) } 100% { opacity: 1; transform: translateX(200px) } } .animate.fadeOutRight, .trigger.fadeOutRight { -webkit-animation-name: fadeOutRight; -moz-animation-name: fadeOutRight; -ms-animation-name: fadeOutRight; -o-animation-name: fadeOutRight; animation-name: fadeOutRight } @-webkit-keyframes fadeOutUpLarge { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(-1000px) } } @-moz-keyframes fadeOutUpLarge { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(-1000px) } } @-ms-keyframes fadeOutUpLarge { 0% { opacity: 1; -ms-transform: translateY(0) } 100% { opacity: 0; -ms-transform: translateY(-1000px) } } @-o-keyframes fadeOutUpLarge { 0% { opacity: 1; -o-transform: translateY(0) } 100% { opacity: 0; -o-transform: translateY(-1000px) } } @keyframes fadeOutUpLarge { 0% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(-1000px) } } .animate.fadeOutUpLarge, .trigger.fadeOutUpLarge { -webkit-animation-name: fadeOutUpLarge; -moz-animation-name: fadeOutUpLarge; -ms-animation-name: fadeOutUpLarge; -o-animation-name: fadeOutUpLarge; animation-name: fadeOutUpLarge } @-webkit-keyframes fadeOutDownLarge { 0% { opacity: 1; -webkit-transform: translateY(0) } 100% { opacity: 0; -webkit-transform: translateY(1000px) } } @-moz-keyframes fadeOutDownLarge { 0% { opacity: 1; -moz-transform: translateY(0) } 100% { opacity: 0; -moz-transform: translateY(1000px) } } @-ms-keyframes fadeOutDownLarge { 0% { opacity: 1; -ms-transform: translateY(0) } 100% { opacity: 0; -ms-transform: translateY(1000px) } } @-o-keyframes fadeOutDownLarge { 0% { opacity: 1; -o-transform: translateY(0) } 100% { opacity: 0; -o-transform: translateY(1000px) } } @keyframes fadeOutDownLarge { 0% { opacity: 1; transform: translateY(0) } 100% { opacity: 0; transform: translateY(1000px) } } .animate.fadeOutDownLarge, .trigger.fadeOutDownLarge { -webkit-animation-name: fadeOutDownLarge; -moz-animation-name: fadeOutDownLarge; -ms-animation-name: fadeOutDownLarge; -o-animation-name: fadeOutDownLarge; animation-name: fadeOutDownLarge } @-webkit-keyframes fadeOutLeftLarge { 0% { opacity: 0; -webkit-transform: translateX(0) } 100% { opacity: 1; -webkit-transform: translateX(-1000px) } } @-moz-keyframes fadeOutLeftLarge { 0% { opacity: 0; -moz-transform: translateX(0) } 100% { opacity: 1; -moz-transform: translateX(-1000px) } } @-ms-keyframes fadeOutLeftLarge { 0% { opacity: 0; -ms-transform: translateX(0) } 100% { opacity: 1; -ms-transform: translateX(-1000px) } } @-o-keyframes fadeOutLeftLarge { 0% { opacity: 0; -o-transform: translateX(0) } 100% { opacity: 1; -o-transform: translateX(-1000px) } } @keyframes fadeOutLeftLarge { 0% { opacity: 0; transform: translateX(0) } 100% { opacity: 1; transform: translateX(-1000px) } } .animate.fadeOutLeftLarge, .trigger.fadeOutLeftLarge { -webkit-animation-name: fadeOutLeftLarge; -moz-animation-name: fadeOutLeftLarge; -ms-animation-name: fadeOutLeftLarge; -o-animation-name: fadeOutLeftLarge; animation-name: fadeOutLeftLarge } @-webkit-keyframes fadeOutRightLarge { 0% { opacity: 0; -webkit-transform: translateX(0) } 100% { opacity: 1; -webkit-transform: translateX(1000px) } } @-moz-keyframes fadeOutRightLarge { 0% { opacity: 0; -moz-transform: translateX(0) } 100% { opacity: 1; -moz-transform: translateX(1000px) } } @-ms-keyframes fadeOutRightLarge { 0% { opacity: 0; -ms-transform: translateX(0) } 100% { opacity: 1; -ms-transform: translateX(1000px) } } @-o-keyframes fadeOutRightLarge { 0% { opacity: 0; -o-transform: translateX(0) } 100% { opacity: 1; -o-transform: translateX(1000px) } } @keyframes fadeOutRightLarge { 0% { opacity: 0; transform: translateX(0) } 100% { opacity: 1; transform: translateX(1000px) } } .animate.fadeOutRightLarge, .trigger.fadeOutRightLarge { -webkit-animation-name: fadeOutRightLarge; -moz-animation-name: fadeOutRightLarge; -ms-animation-name: fadeOutRightLarge; -o-animation-name: fadeOutRightLarge; animation-name: fadeOutRightLarge } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale(0) } 100% { opacity: 1; -webkit-transform: scale(1) } } @-moz-keyframes zoomIn { 0% { opacity: 0; -moz-transform: scale(0) } 100% { opacity: 1; -moz-transform: scale(1) } } @-ms-keyframes zoomIn { 0% { opacity: 0; -ms-transform: scale(0) } 100% { opacity: 1; -ms-transform: scale(1) } } @-o-keyframes zoomIn { 0% { opacity: 0; -o-transform: scale(0) } 100% { opacity: 1; -o-transform: scale(1) } } @keyframes zoomIn { 0% { opacity: 0; transform: scale(0) } 100% { opacity: 1; transform: scale(1) } } .animate.zoomIn, .trigger.zoomIn { -webkit-animation-name: zoomIn; -moz-animation-name: zoomIn; -ms-animation-name: zoomIn; -o-animation-name: zoomIn; animation-name: zoomIn } @-webkit-keyframes zoomInUp { 0% { opacity: 0; -webkit-transform: scale(0) translateY(200px) } 100% { opacity: 1; -webkit-transform: scale(1) translateY(0) } } @-moz-keyframes zoomInUp { 0% { opacity: 0; -moz-transform: scale(0) translateY(200px) } 100% { opacity: 1; -moz-transform: scale(1) translateY(0) } } @-ms-keyframes zoomInUp { 0% { opacity: 0; -ms-transform: scale(0) translateY(200px) } 100% { opacity: 1; -ms-transform: scale(1) translateY(0) } } @-o-keyframes zoomInUp { 0% { opacity: 0; -o-transform: scale(0) translateY(200px) } 100% { opacity: 1; -o-transform: scale(1) translateY(0) } } @keyframes zoomInUp { 0% { opacity: 0; transform: scale(0) translateY(200px) } 100% { opacity: 1; transform: scale(1) translateY(0) } } .animate.zoomInUp, .trigger.zoomInUp { -webkit-animation-name: zoomInUp; -moz-animation-name: zoomInUp; -ms-animation-name: zoomInUp; -o-animation-name: zoomInUp; animation-name: zoomInUp } @-webkit-keyframes zoomInDown { 0% { opacity: 0; -webkit-transform: scale(0) translateY(-200px) } 100% { opacity: 1; -webkit-transform: scale(1) translateY(0) } } @-moz-keyframes zoomInDown { 0% { opacity: 0; -moz-transform: scale(0) translateY(-200px) } 100% { opacity: 1; -moz-transform: scale(1) translateY(0) } } @-ms-keyframes zoomInDown { 0% { opacity: 0; -ms-transform: scale(0) translateY(-200px) } 100% { opacity: 1; -ms-transform: scale(1) translateY(0) } } @-o-keyframes zoomInDown { 0% { opacity: 0; -o-transform: scale(0) translateY(-200px) } 100% { opacity: 1; -o-transform: scale(1) translateY(0) } } @keyframes zoomInDown { 0% { opacity: 0; transform: scale(0) translateY(-200px) } 100% { opacity: 1; transform: scale(1) translateY(0) } } .animate.zoomInDown, .trigger.zoomInDown { -webkit-animation-name: zoomInDown; -moz-animation-name: zoomInDown; -ms-animation-name: zoomInDown; -o-animation-name: zoomInDown; animation-name: zoomInDown } @-webkit-keyframes zoomInLeft { 0% { opacity: 0; -webkit-transform: scale(0) translateX(-200px) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(0) } } @-moz-keyframes zoomInLeft { 0% { opacity: 0; -moz-transform: scale(0) translateX(-200px) } 100% { opacity: 1; -moz-transform: scale(1) translateX(0) } } @-ms-keyframes zoomInLeft { 0% { opacity: 0; -ms-transform: scale(0) translateX(-200px) } 100% { opacity: 1; -ms-transform: scale(1) translateX(0) } } @-o-keyframes zoomInLeft { 0% { opacity: 0; -o-transform: scale(0) translateX(-200px) } 100% { opacity: 1; -o-transform: scale(1) translateX(0) } } @keyframes zoomInLeft { 0% { opacity: 0; transform: scale(0) translateX(-200px) } 100% { opacity: 1; transform: scale(1) translateX(0) } } .animate.zoomInLeft, .trigger.zoomInLeft { -webkit-animation-name: zoomInLeft; -moz-animation-name: zoomInLeft; -ms-animation-name: zoomInLeft; -o-animation-name: zoomInLeft; animation-name: zoomInLeft } @-webkit-keyframes zoomInRight { 0% { opacity: 0; -webkit-transform: scale(0) translateX(200px) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(0) } } @-moz-keyframes zoomInRight { 0% { opacity: 0; -moz-transform: scale(0) translateX(200px) } 100% { opacity: 1; -moz-transform: scale(1) translateX(0) } } @-ms-keyframes zoomInRight { 0% { opacity: 0; -ms-transform: scale(0) translateX(200px) } 100% { opacity: 1; -ms-transform: scale(1) translateX(0) } } @-o-keyframes zoomInRight { 0% { opacity: 0; -o-transform: scale(0) translateX(200px) } 100% { opacity: 1; -o-transform: scale(1) translateX(0) } } @keyframes zoomInRight { 0% { opacity: 0; transform: scale(0) translateX(200px) } 100% { opacity: 1; transform: scale(1) translateX(0) } } .animate.zoomInRight, .trigger.zoomInRight { -webkit-animation-name: zoomInRight; -moz-animation-name: zoomInRight; -ms-animation-name: zoomInRight; -o-animation-name: zoomInRight; animation-name: zoomInRight } @-webkit-keyframes zoomInUpLarge { 0% { opacity: 0; -webkit-transform: scale(0) translateY(1000px) } 100% { opacity: 1; -webkit-transform: scale(1) translateY(0) } } @-moz-keyframes zoomInUpLarge { 0% { opacity: 0; -moz-transform: scale(0) translateY(1000px) } 100% { opacity: 1; -moz-transform: scale(1) translateY(0) } } @-ms-keyframes zoomInUpLarge { 0% { opacity: 0; -ms-transform: scale(0) translateY(1000px) } 100% { opacity: 1; -ms-transform: scale(1) translateY(0) } } @-o-keyframes zoomInUpLarge { 0% { opacity: 0; -o-transform: scale(0) translateY(1000px) } 100% { opacity: 1; -o-transform: scale(1) translateY(0) } } @keyframes zoomInUpLarge { 0% { opacity: 0; transform: scale(0) translateY(1000px) } 100% { opacity: 1; transform: scale(1) translateY(0) } } .animate.zoomInUpLarge, .trigger.zoomInUpLarge { -webkit-animation-name: zoomInUpLarge; -moz-animation-name: zoomInUpLarge; -ms-animation-name: zoomInUpLarge; -o-animation-name: zoomInUpLarge; animation-name: zoomInUpLarge } @-webkit-keyframes zoomInDownLarge { 0% { opacity: 0; -webkit-transform: scale(0) translateY(-1000px) } 100% { opacity: 1; -webkit-transform: scale(1) translateY(0) } } @-moz-keyframes zoomInDownLarge { 0% { opacity: 0; -moz-transform: scale(0) translateY(-1000px) } 100% { opacity: 1; -moz-transform: scale(1) translateY(0) } } @-ms-keyframes zoomInDownLarge { 0% { opacity: 0; -ms-transform: scale(0) translateY(-1000px) } 100% { opacity: 1; -ms-transform: scale(1) translateY(0) } } @-o-keyframes zoomInDownLarge { 0% { opacity: 0; -o-transform: scale(0) translateY(-1000px) } 100% { opacity: 1; -o-transform: scale(1) translateY(0) } } @keyframes zoomInDownLarge { 0% { opacity: 0; transform: scale(0) translateY(-1000px) } 100% { opacity: 1; transform: scale(1) translateY(0) } } .animate.zoomInDownLarge, .trigger.zoomInDownLarge { -webkit-animation-name: zoomInDownLarge; -moz-animation-name: zoomInDownLarge; -ms-animation-name: zoomInDownLarge; -o-animation-name: zoomInDownLarge; animation-name: zoomInDownLarge } @-webkit-keyframes zoomInLeftLarge { 0% { opacity: 0; -webkit-transform: scale(0) translateX(-1000px) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(0) } } @-moz-keyframes zoomInLeftLarge { 0% { opacity: 0; -moz-transform: scale(0) translateX(-1000px) } 100% { opacity: 1; -moz-transform: scale(1) translateX(0) } } @-ms-keyframes zoomInLeftLarge { 0% { opacity: 0; -ms-transform: scale(0) translateX(-1000px) } 100% { opacity: 1; -ms-transform: scale(1) translateX(0) } } @-o-keyframes zoomInLeftLarge { 0% { opacity: 0; -o-transform: scale(0) translateX(-1000px) } 100% { opacity: 1; -o-transform: scale(1) translateX(0) } } @keyframes zoomInLeftLarge { 0% { opacity: 0; transform: scale(0) translateX(-1000px) } 100% { opacity: 1; transform: scale(1) translateX(0) } } .animate.zoomInLeftLarge, .trigger.zoomInLeftLarge { -webkit-animation-name: zoomInLeftLarge; -moz-animation-name: zoomInLeftLarge; -ms-animation-name: zoomInLeftLarge; -o-animation-name: zoomInLeftLarge; animation-name: zoomInLeftLarge } @-webkit-keyframes zoomInRightLarge { 0% { opacity: 0; -webkit-transform: scale(0) translateX(1000px) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(0) } } @-moz-keyframes zoomInRightLarge { 0% { opacity: 0; -moz-transform: scale(0) translateX(1000px) } 100% { opacity: 1; -moz-transform: scale(1) translateX(0) } } @-ms-keyframes zoomInRightLarge { 0% { opacity: 0; -ms-transform: scale(0) translateX(1000px) } 100% { opacity: 1; -ms-transform: scale(1) translateX(0) } } @-o-keyframes zoomInRightLarge { 0% { opacity: 0; -o-transform: scale(0) translateX(1000px) } 100% { opacity: 1; -o-transform: scale(1) translateX(0) } } @keyframes zoomInRightLarge { 0% { opacity: 0; transform: scale(0) translateX(1000px) } 100% { opacity: 1; transform: scale(1) translateX(0) } } .animate.zoomInRightLarge, .trigger.zoomInRightLarge { -webkit-animation-name: zoomInRightLarge; -moz-animation-name: zoomInRightLarge; -ms-animation-name: zoomInRightLarge; -o-animation-name: zoomInRightLarge; animation-name: zoomInRightLarge } @-webkit-keyframes zoomOut { 0% { opacity: 1; -webkit-transform: scale(1) } 100% { opacity: 0; -webkit-transform: scale(0) } } @-moz-keyframes zoomOut { 0% { opacity: 1; -moz-transform: scale(1) } 100% { opacity: 0; -moz-transform: scale(0) } } @-ms-keyframes zoomOut { 0% { opacity: 1; -ms-transform: scale(1) } 100% { opacity: 0; -ms-transform: scale(0) } } @-o-keyframes zoomOut { 0% { opacity: 1; -o-transform: scale(1) } 100% { opacity: 0; -o-transform: scale(0) } } @keyframes zoomOut { 0% { opacity: 1; transform: scale(1) } 100% { opacity: 0; transform: scale(0) } } .animate.zoomOut, .trigger.zoomOut { -webkit-animation-name: zoomOut; -moz-animation-name: zoomOut; -ms-animation-name: zoomOut; -o-animation-name: zoomOut; animation-name: zoomOut } @-webkit-keyframes zoomOutUp { 0% { opacity: 1; -webkit-transform: scale(1) translateY(0) } 100% { opacity: 0; -webkit-transform: scale(0) translateY(-200px) } } @-moz-keyframes zoomOutUp { 0% { opacity: 1; -moz-transform: scale(1) translateY(0) } 100% { opacity: 0; -moz-transform: scale(0) translateY(-200px) } } @-ms-keyframes zoomOutUp { 0% { opacity: 1; -ms-transform: scale(1) translateY(0) } 100% { opacity: 0; -ms-transform: scale(0) translateY(-200px) } } @-o-keyframes zoomOutUp { 0% { opacity: 1; -o-transform: scale(1) translateY(0) } 100% { opacity: 0; -o-transform: scale(0) translateY(-200px) } } @keyframes zoomOutUp { 0% { opacity: 1; transform: scale(1) translateY(0) } 100% { opacity: 0; transform: scale(0) translateY(-200px) } } .animate.zoomOutUp, .trigger.zoomOutUp { -webkit-animation-name: zoomOutUp; -moz-animation-name: zoomOutUp; -ms-animation-name: zoomOutUp; -o-animation-name: zoomOutUp; animation-name: zoomOutUp } @-webkit-keyframes zoomOutDown { 0% { opacity: 1; -webkit-transform: scale(1) translateY(0) } 100% { opacity: 0; -webkit-transform: scale(0) translateY(200px) } } @-moz-keyframes zoomOutDown { 0% { opacity: 1; -moz-transform: scale(1) translateY(0) } 100% { opacity: 0; -moz-transform: scale(0) translateY(200px) } } @-ms-keyframes zoomOutDown { 0% { opacity: 1; -ms-transform: scale(1) translateY(0) } 100% { opacity: 0; -ms-transform: scale(0) translateY(200px) } } @-o-keyframes zoomOutDown { 0% { opacity: 1; -o-transform: scale(1) translateY(0) } 100% { opacity: 0; -o-transform: scale(0) translateY(200px) } } @keyframes zoomOutDown { 0% { opacity: 1; transform: scale(1) translateY(0) } 100% { opacity: 0; transform: scale(0) translateY(200px) } } .animate.zoomOutDown, .trigger.zoomOutDown { -webkit-animation-name: zoomOutDown; -moz-animation-name: zoomOutDown; -ms-animation-name: zoomOutDown; -o-animation-name: zoomOutDown; animation-name: zoomOutDown } @-webkit-keyframes zoomOutLeft { 0% { opacity: 0; -webkit-transform: scale(0) translateX(0) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(-200px) } } @-moz-keyframes zoomOutLeft { 0% { opacity: 0; -moz-transform: scale(0) translateX(0) } 100% { opacity: 1; -moz-transform: scale(1) translateX(-200px) } } @-ms-keyframes zoomOutLeft { 0% { opacity: 0; -ms-transform: scale(0) translateX(0) } 100% { opacity: 1; -ms-transform: scale(1) translateX(-200px) } } @-o-keyframes zoomOutLeft { 0% { opacity: 0; -o-transform: scale(0) translateX(0) } 100% { opacity: 1; -o-transform: scale(1) translateX(-200px) } } @keyframes zoomOutLeft { 0% { opacity: 0; transform: scale(0) translateX(0) } 100% { opacity: 1; transform: scale(1) translateX(-200px) } } .animate.zoomOutLeft, .trigger.zoomOutLeft { -webkit-animation-name: zoomOutLeft; -moz-animation-name: zoomOutLeft; -ms-animation-name: zoomOutLeft; -o-animation-name: zoomOutLeft; animation-name: zoomOutLeft } @-webkit-keyframes zoomOutRight { 0% { opacity: 0; -webkit-transform: scale(0) translateX(0) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(200px) } } @-moz-keyframes zoomOutRight { 0% { opacity: 0; -moz-transform: scale(0) translateX(0) } 100% { opacity: 1; -moz-transform: scale(1) translateX(200px) } } @-ms-keyframes zoomOutRight { 0% { opacity: 0; -ms-transform: scale(0) translateX(0) } 100% { opacity: 1; -ms-transform: scale(1) translateX(200px) } } @-o-keyframes zoomOutRight { 0% { opacity: 0; -o-transform: scale(0) translateX(0) } 100% { opacity: 1; -o-transform: scale(1) translateX(200px) } } @keyframes zoomOutRight { 0% { opacity: 0; transform: scale(0) translateX(0) } 100% { opacity: 1; transform: scale(1) translateX(200px) } } .animate.zoomOutRight, .trigger.zoomOutRight { -webkit-animation-name: zoomOutRight; -moz-animation-name: zoomOutRight; -ms-animation-name: zoomOutRight; -o-animation-name: zoomOutRight; animation-name: zoomOutRight } @-webkit-keyframes zoomOutUpLarge { 0% { opacity: 1; -webkit-transform: scale(1) translateY(0) } 100% { opacity: 0; -webkit-transform: scale(0) translateY(-1000px) } } @-moz-keyframes zoomOutUpLarge { 0% { opacity: 1; -moz-transform: scale(1) translateY(0) } 100% { opacity: 0; -moz-transform: scale(0) translateY(-1000px) } } @-ms-keyframes zoomOutUpLarge { 0% { opacity: 1; -ms-transform: scale(1) translateY(0) } 100% { opacity: 0; -ms-transform: scale(0) translateY(-1000px) } } @-o-keyframes zoomOutUpLarge { 0% { opacity: 1; -o-transform: scale(1) translateY(0) } 100% { opacity: 0; -o-transform: scale(0) translateY(-1000px) } } @keyframes zoomOutUpLarge { 0% { opacity: 1; transform: scale(1) translateY(0) } 100% { opacity: 0; transform: scale(0) translateY(-1000px) } } .animate.zoomOutUpLarge, .trigger.zoomOutUpLarge { -webkit-animation-name: zoomOutUpLarge; -moz-animation-name: zoomOutUpLarge; -ms-animation-name: zoomOutUpLarge; -o-animation-name: zoomOutUpLarge; animation-name: zoomOutUpLarge } @-webkit-keyframes zoomOutDownLarge { 0% { opacity: 1; -webkit-transform: scale(1) translateY(0) } 100% { opacity: 0; -webkit-transform: scale(0) translateY(1000px) } } @-moz-keyframes zoomOutDownLarge { 0% { opacity: 1; -moz-transform: scale(1) translateY(0) } 100% { opacity: 0; -moz-transform: scale(0) translateY(1000px) } } @-ms-keyframes zoomOutDownLarge { 0% { opacity: 1; -ms-transform: scale(1) translateY(0) } 100% { opacity: 0; -ms-transform: scale(0) translateY(1000px) } } @-o-keyframes zoomOutDownLarge { 0% { opacity: 1; -o-transform: scale(1) translateY(0) } 100% { opacity: 0; -o-transform: scale(0) translateY(1000px) } } @keyframes zoomOutDownLarge { 0% { opacity: 1; transform: scale(1) translateY(0) } 100% { opacity: 0; transform: scale(0) translateY(1000px) } } .animate.zoomOutDownLarge, .trigger.zoomOutDownLarge { -webkit-animation-name: zoomOutDownLarge; -moz-animation-name: zoomOutDownLarge; -ms-animation-name: zoomOutDownLarge; -o-animation-name: zoomOutDownLarge; animation-name: zoomOutDownLarge } @-webkit-keyframes zoomOutLeftLarge { 0% { opacity: 0; -webkit-transform: scale(0) translateX(0) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(-1000px) } } @-moz-keyframes zoomOutLeftLarge { 0% { opacity: 0; -moz-transform: scale(0) translateX(0) } 100% { opacity: 1; -moz-transform: scale(1) translateX(-1000px) } } @-ms-keyframes zoomOutLeftLarge { 0% { opacity: 0; -ms-transform: scale(0) translateX(0) } 100% { opacity: 1; -ms-transform: scale(1) translateX(-1000px) } } @-o-keyframes zoomOutLeftLarge { 0% { opacity: 0; -o-transform: scale(0) translateX(0) } 100% { opacity: 1; -o-transform: scale(1) translateX(-1000px) } } @keyframes zoomOutLeftLarge { 0% { opacity: 0; transform: scale(0) translateX(0) } 100% { opacity: 1; transform: scale(1) translateX(-1000px) } } .animate.zoomOutLeftLarge, .trigger.zoomOutLeftLarge { -webkit-animation-name: zoomOutLeftLarge; -moz-animation-name: zoomOutLeftLarge; -ms-animation-name: zoomOutLeftLarge; -o-animation-name: zoomOutLeftLarge; animation-name: zoomOutLeftLarge } @-webkit-keyframes zoomOutRightLarge { 0% { opacity: 0; -webkit-transform: scale(0) translateX(0) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(1000px) } } @-moz-keyframes zoomOutRightLarge { 0% { opacity: 0; -moz-transform: scale(0) translateX(0) } 100% { opacity: 1; -moz-transform: scale(1) translateX(1000px) } } @-ms-keyframes zoomOutRightLarge { 0% { opacity: 0; -ms-transform: scale(0) translateX(0) } 100% { opacity: 1; -ms-transform: scale(1) translateX(1000px) } } @-o-keyframes zoomOutRightLarge { 0% { opacity: 0; -o-transform: scale(0) translateX(0) } 100% { opacity: 1; -o-transform: scale(1) translateX(1000px) } } @keyframes zoomOutRightLarge { 0% { opacity: 0; transform: scale(0) translateX(0) } 100% { opacity: 1; transform: scale(1) translateX(1000px) } } .animate.zoomOutRightLarge, .trigger.zoomOutRightLarge { -webkit-animation-name: zoomOutRightLarge; -moz-animation-name: zoomOutRightLarge; -ms-animation-name: zoomOutRightLarge; -o-animation-name: zoomOutRightLarge; animation-name: zoomOutRightLarge } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(0) } 50% { opacity: 1; -webkit-transform: scale(1.1) } 70% { opacity: 1; -webkit-transform: scale(.9) } 100% { opacity: 1; -webkit-transform: scale(1) } } @-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(0) } 50% { opacity: 1; -moz-transform: scale(1.1) } 70% { opacity: 1; -moz-transform: scale(.9) } 100% { opacity: 1; -moz-transform: scale(1) } } @-ms-keyframes bounceIn { 0% { opacity: 0; -ms-transform: scale(0) } 50% { opacity: 1; -ms-transform: scale(1.1) } 70% { opacity: 1; -ms-transform: scale(.9) } 100% { opacity: 1; -ms-transform: scale(1) } } @-o-keyframes bounceIn { 0% { opacity: 0; -o-transform: scale(0) } 50% { opacity: 1; -o-transform: scale(1.1) } 70% { opacity: 1; -o-transform: scale(.9) } 100% { opacity: 1; -o-transform: scale(1) } } @keyframes bounceIn { 0% { opacity: 0; transform: scale(0) } 50% { opacity: 1; transform: scale(1.1) } 70% { opacity: 1; transform: scale(.9) } 100% { opacity: 1; transform: scale(1) } } .animate.bounceIn, .trigger.bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -ms-animation-name: bounceIn; -o-animation-name: bounceIn; animation-name: bounceIn } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: scale(0) translateY(200px) } 60% { opacity: 1; -webkit-transform: scale(1.1) translateY(-40px) } 80% { opacity: 1; -webkit-transform: scale(.9) translateY(20px) } 100% { opacity: 1; -webkit-transform: scale(1) translateY(0) } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: scale(0) translateY(200px) } 60% { opacity: 1; -moz-transform: scale(1.1) translateY(-40px) } 80% { opacity: 1; -moz-transform: scale(.9) translateY(20px) } 100% { opacity: 1; -moz-transform: scale(1) translateY(0) } } @-ms-keyframes bounceInUp { 0% { opacity: 0; -ms-transform: scale(0) translateY(200px) } 60% { opacity: 1; -ms-transform: scale(1.1) translateY(-40px) } 80% { opacity: 1; -ms-transform: scale(.9) translateY(20px) } 100% { opacity: 1; -ms-transform: scale(1) translateY(0) } } @-o-keyframes bounceInUp { 0% { opacity: 0; -o-transform: scale(0) translateY(200px) } 60% { opacity: 1; -o-transform: scale(1.1) translateY(-40px) } 80% { opacity: 1; -o-transform: scale(.9) translateY(20px) } 100% { opacity: 1; -o-transform: scale(1) translateY(0) } } @keyframes bounceInUp { 0% { opacity: 0; transform: scale(0) translateY(200px) } 60% { opacity: 1; transform: scale(1.1) translateY(-40px) } 80% { opacity: 1; transform: scale(.9) translateY(20px) } 100% { opacity: 1; transform: scale(1) translateY(0) } } .animate.bounceInUp, .trigger.bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -ms-animation-name: bounceInUp; -o-animation-name: bounceInUp; animation-name: bounceInUp } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: scale(0) translateY(-200px) } 60% { opacity: 1; -webkit-transform: scale(1.1) translateY(40px) } 80% { opacity: 1; -webkit-transform: scale(.9) translateY(-20px) } 100% { opacity: 1; -webkit-transform: scale(1) translateY(0) } } @-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: scale(0) translateY(-200px) } 60% { opacity: 1; -moz-transform: scale(1.1) translateY(40px) } 80% { opacity: 1; -moz-transform: scale(.9) translateY(-20px) } 100% { opacity: 1; -moz-transform: scale(1) translateY(0) } } @-ms-keyframes bounceInDown { 0% { opacity: 0; -ms-transform: scale(0) translateY(-200px) } 60% { opacity: 1; -ms-transform: scale(1.1) translateY(40px) } 80% { opacity: 1; -ms-transform: scale(.9) translateY(-20px) } 100% { opacity: 1; -ms-transform: scale(1) translateY(0) } } @-o-keyframes bounceInDown { 0% { opacity: 0; -o-transform: scale(0) translateY(-200px) } 60% { opacity: 1; -o-transform: scale(1.1) translateY(40px) } 80% { opacity: 1; -o-transform: scale(.9) translateY(-20px) } 100% { opacity: 1; -o-transform: scale(1) translateY(0) } } @keyframes bounceInDown { 0% { opacity: 0; transform: scale(0) translateY(-200px) } 60% { opacity: 1; transform: scale(1.1) translateY(40px) } 80% { opacity: 1; transform: scale(.9) translateY(-20px) } 100% { opacity: 1; transform: scale(1) translateY(0) } } .animate.bounceInDown, .trigger.bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -ms-animation-name: bounceInDown; -o-animation-name: bounceInDown; animation-name: bounceInDown } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: scale(0) translateX(-200px) } 60% { opacity: 1; -webkit-transform: scale(1.1) translateX(40px) } 80% { opacity: 1; -webkit-transform: scale(.9) translateX(-20px) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(0) } } @-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: scale(0) translateX(-200px) } 60% { opacity: 1; -moz-transform: scale(1.1) translateX(40px) } 80% { opacity: 1; -moz-transform: scale(.9) translateX(-20px) } 100% { opacity: 1; -moz-transform: scale(1) translateX(0) } } @-ms-keyframes bounceInLeft { 0% { opacity: 0; -ms-transform: scale(0) translateX(-200px) } 60% { opacity: 1; -ms-transform: scale(1.1) translateX(40px) } 80% { opacity: 1; -ms-transform: scale(.9) translateX(-20px) } 100% { opacity: 1; -ms-transform: scale(1) translateX(0) } } @-o-keyframes bounceInLeft { 0% { opacity: 0; -o-transform: scale(0) translateX(-200px) } 60% { opacity: 1; -o-transform: scale(1.1) translateX(40px) } 80% { opacity: 1; -o-transform: scale(.9) translateX(-20px) } 100% { opacity: 1; -o-transform: scale(1) translateX(0) } } @keyframes bounceInLeft { 0% { opacity: 0; transform: scale(0) translateX(-200px) } 60% { opacity: 1; transform: scale(1.1) translateX(40px) } 80% { opacity: 1; transform: scale(.9) translateX(-20px) } 100% { opacity: 1; transform: scale(1) translateX(0) } } .animate.bounceInLeft, .trigger.bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -ms-animation-name: bounceInLeft; -o-animation-name: bounceInLeft; animation-name: bounceInLeft } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: scale(0) translateX(200px) } 60% { opacity: 1; -webkit-transform: scale(1.1) translateX(-40px) } 80% { opacity: 1; -webkit-transform: scale(.9) translateX(20px) } 100% { opacity: 1; -webkit-transform: scale(1) translateX(0) } } @-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: scale(0) translateX(200px) } 60% { opacity: 1; -moz-transform: scale(1.1) translateX(-40px) } 80% { opacity: 1; -moz-transform: scale(.9) translateX(20px) } 100% { opacity: 1; -moz-transform: scale(1) translateX(0) } } @-ms-keyframes bounceInRight { 0% { opacity: 0; -ms-transform: scale(0) translateX(200px) } 60% { opacity: 1; -ms-transform: scale(1.1) translateX(-40px) } 80% { opacity: 1; -ms-transform: scale(.9) translateX(20px) } 100% { opacity: 1; -ms-transform: scale(1) translateX(0) } } @-o-keyframes bounceInRight { 0% { opacity: 0; -o-transform: scale(0) translateX(200px) } 60% { opacity: 1; -o-transform: scale(1.1) translateX(-40px) } 80% { opacity: 1; -o-transform: scale(.9) translateX(20px) } 100% { opacity: 1; -o-transform: scale(1) translateX(0) } } @keyframes bounceInRight { 0% { opacity: 0; transform: scale(0) translateX(200px) } 60% { opacity: 1; transform: scale(1.1) translateX(-40px) } 80% { opacity: 1; transform: scale(.9) translateX(20px) } 100% { opacity: 1; transform: scale(1) translateX(0) } } .animate.bounceInRight, .trigger.bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -ms-animation-name: bounceInRight; -o-animation-name: bounceInRight; animation-name: bounceInRight } @-webkit-keyframes bounceOut { 0% { opacity: 1; -webkit-transform: scale(1) } 30% { opacity: 1; -webkit-transform: scale(1.1) } 50% { opacity: 0; -webkit-transform: scale(.9) } 100% { opacity: 0; -webkit-transform: scale(0) } } @-moz-keyframes bounceOut { 0% { opacity: 1; -moz-transform: scale(1) } 30% { opacity: 1; -moz-transform: scale(1.1) } 50% { opacity: 0; -moz-transform: scale(.9) } 100% { opacity: 0; -moz-transform: scale(0) } } @-ms-keyframes bounceOut { 0% { opacity: 1; -ms-transform: scale(1) } 30% { opacity: 1; -ms-transform: scale(1.1) } 50% { opacity: 0; -ms-transform: scale(.9) } 100% { opacity: 0; -ms-transform: scale(0) } } @-o-keyframes bounceOut { 0% { opacity: 1; -o-transform: scale(1) } 30% { opacity: 1; -o-transform: scale(1.1) } 50% { opacity: 0; -o-transform: scale(.9) } 100% { opacity: 0; -o-transform: scale(0) } } @keyframes bounceOut { 0% { opacity: 1; transform: scale(1) } 30% { opacity: 1; transform: scale(1.1) } 50% { opacity: 0; transform: scale(.9) } 100% { opacity: 0; transform: scale(0) } } .animate.bounceOut, .trigger.bounceOut { -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -ms-animation-name: bounceOut; -o-animation-name: bounceOut; animation-name: bounceOut } @-webkit-keyframes bounceOutUp { 0% { opacity: 1; -webkit-transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(40px) } 100% { opacity: 0; -webkit-transform: translateY(-200px) } } @-moz-keyframes bounceOutUp { 0% { opacity: 1; -moz-transform: translateY(0) } 20% { opacity: 1; -moz-transform: translateY(40px) } 100% { opacity: 0; -moz-transform: translateY(-200px) } } @-ms-keyframes bounceOutUp { 0% { opacity: 1; -ms-transform: translateY(0) } 20% { opacity: 1; -ms-transform: translateY(40px) } 100% { opacity: 0; -ms-transform: translateY(-200px) } } @-o-keyframes bounceOutUp { 0% { opacity: 1; -o-transform: translateY(0) } 20% { opacity: 1; -o-transform: translateY(40px) } 100% { opacity: 0; -o-transform: translateY(-200px) } } @keyframes bounceOutUp { 0% { opacity: 1; transform: translateY(0) } 20% { opacity: 1; transform: translateY(40px) } 100% { opacity: 0; transform: translateY(-200px) } } .animate.bounceOutUp, .trigger.bounceOutUp { -webkit-animation-name: bounceOutUp; -moz-animation-name: bounceOutUp; -ms-animation-name: bounceOutUp; -o-animation-name: bounceOutUp; animation-name: bounceOutUp } @-webkit-keyframes bounceOutDown { 0% { opacity: 1; -webkit-transform: translateY(0) } 20% { opacity: 1; -webkit-transform: translateY(-40px) } 100% { opacity: 0; -webkit-transform: translateY(200px) } } @-moz-keyframes bounceOutDown { 0% { opacity: 1; -moz-transform: translateY(0) } 20% { opacity: 1; -moz-transform: translateY(-40px) } 100% { opacity: 0; -moz-transform: translateY(200px) } } @-ms-keyframes bounceOutDown { 0% { opacity: 1; -ms-transform: translateY(0) } 20% { opacity: 1; -ms-transform: translateY(-40px) } 100% { opacity: 0; -ms-transform: translateY(200px) } } @-o-keyframes bounceOutDown { 0% { opacity: 1; -o-transform: translateY(0) } 20% { opacity: 1; -o-transform: translateY(-40px) } 100% { opacity: 0; -o-transform: translateY(200px) } } @keyframes bounceOutDown { 0% { opacity: 1; transform: translateY(0) } 20% { opacity: 1; transform: translateY(-40px) } 100% { opacity: 0; transform: translateY(200px) } } .animate.bounceOutDown, .trigger.bounceOutDown { -webkit-animation-name: bounceOutDown; -moz-animation-name: bounceOutDown; -ms-animation-name: bounceOutDown; -o-animation-name: bounceOutDown; animation-name: bounceOutDown } @-webkit-keyframes bounceOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0) } 20% { opacity: 1; -webkit-transform: translateX(40px) } 100% { opacity: 0; -webkit-transform: translateX(-200px) } } @-moz-keyframes bounceOutLeft { 0% { opacity: 1; -moz-transform: translateX(0) } 20% { opacity: 1; -moz-transform: translateX(40px) } 100% { opacity: 0; -moz-transform: translateX(-200px) } } @-ms-keyframes bounceOutLeft { 0% { opacity: 1; -ms-transform: translateX(0) } 20% { opacity: 1; -ms-transform: translateX(40px) } 100% { opacity: 0; -ms-transform: translateX(-200px) } } @-o-keyframes bounceOutLeft { 0% { opacity: 1; -o-transform: translateX(0) } 20% { opacity: 1; -o-transform: translateX(40px) } 100% { opacity: 0; -o-transform: translateX(-200px) } } @keyframes bounceOutLeft { 0% { opacity: 1; transform: translateX(0) } 20% { opacity: 1; transform: translateX(40px) } 100% { opacity: 0; transform: translateX(-200px) } } .animate.bounceOutLeft, .trigger.bounceOutLeft { -webkit-animation-name: bounceOutLeft; -moz-animation-name: bounceOutLeft; -ms-animation-name: bounceOutLeft; -o-animation-name: bounceOutLeft; animation-name: bounceOutLeft } @-webkit-keyframes bounceOutRight { 0% { opacity: 1; -webkit-transform: translateX(0) } 20% { opacity: 1; -webkit-transform: translateX(-40px) } 100% { opacity: 0; -webkit-transform: translateX(200px) } } @-moz-keyframes bounceOutRight { 0% { opacity: 1; -moz-transform: translateX(0) } 20% { opacity: 1; -moz-transform: translateX(-40px) } 100% { opacity: 0; -moz-transform: translateX(200px) } } @-ms-keyframes bounceOutRight { 0% { opacity: 1; -ms-transform: translateX(0) } 20% { opacity: 1; -ms-transform: translateX(-40px) } 100% { opacity: 0; -ms-transform: translateX(200px) } } @-o-keyframes bounceOutRight { 0% { opacity: 1; -o-transform: translateX(0) } 20% { opacity: 1; -o-transform: translateX(-40px) } 100% { opacity: 0; -o-transform: translateX(200px) } } @keyframes bounceOutRight { 0% { opacity: 1; transform: translateX(0) } 20% { opacity: 1; transform: translateX(-40px) } 100% { opacity: 0; transform: translateX(200px) } } .animate.bounceOutRight, .trigger.bounceOutRight { -webkit-animation-name: bounceOutRight; -moz-animation-name: bounceOutRight; -ms-animation-name: bounceOutRight; -o-animation-name: bounceOutRight; animation-name: bounceOutRight } @-webkit-keyframes spinLeft { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-380deg); opacity: 0 } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes spinLeft { 0% { -moz-transform-origin: center center; -moz-transform: rotate(-380deg); opacity: 0 } 100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1 } } @-ms-keyframes spinLeft { 0% { -ms-transform-origin: center center; -ms-transform: rotate(-380deg); opacity: 0 } 100% { -ms-transform-origin: center center; -ms-transform: rotate(0); opacity: 1 } } @-o-keyframes spinLeft { 0% { -o-transform-origin: center center; -o-transform: rotate(-380deg); opacity: 0 } 100% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1 } } @keyframes spinLeft { 0% { transform-origin: center center; transform: rotate(-380deg); opacity: 0 } 100% { transform-origin: center center; transform: rotate(0); opacity: 1 } } .animate.spinLeft, .trigger.spinLeft { -webkit-animation-name: spinLeft; -moz-animation-name: spinLeft; -ms-animation-name: spinLeft; -o-animation-name: spinLeft; animation-name: spinLeft } @-webkit-keyframes spinRight { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(380deg); opacity: 0 } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1 } } @-moz-keyframes spinRight { 0% { -moz-transform-origin: center center; -moz-transform: rotate(380deg); opacity: 0 } 100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1 } } @-ms-keyframes spinRight { 0% { -ms-transform-origin: center center; -ms-transform: rotate(380deg); opacity: 0 } 100% { -ms-transform-origin: center center; -ms-transform: rotate(0); opacity: 1 } } @-o-keyframes spinRight { 0% { -o-transform-origin: center center; -o-transform: rotate(380deg); opacity: 0 } 100% { -o-transform-origin: center center; -o-transform: rotate(0); opacity: 1 } } @keyframes spinRight { 0% { transform-origin: center center; transform: rotate(380deg); opacity: 0 } 100% { transform-origin: center center; transform: rotate(0); opacity: 1 } } .animate.spinRight, .trigger.spinRight { -webkit-animation-name: spinRight; -moz-animation-name: spinRight; -ms-animation-name: spinRight; -o-animation-name: spinRight; animation-name: spinRight } @-webkit-keyframes flash { 0%, 100%, 50% { opacity: 1 } 25%, 75% { opacity: 0 } } @-moz-keyframes flash { 0%, 100%, 50% { opacity: 1 } 25%, 75% { opacity: 0 } } @-ms-keyframes flash { 0%, 100%, 50% { opacity: 1 } 25%, 75% { opacity: 0 } } @-o-keyframes flash { 0%, 100%, 50% { opacity: 1 } 25%, 75% { opacity: 0 } } @keyframes flash { 0%, 100%, 50% { opacity: 1 } 25%, 75% { opacity: 0 } } .animate.flash, .onHoverFlash:hover, .trigger.flash { -webkit-animation-name: flash; -moz-animation-name: flash; -ms-animation-name: flash; -o-animation-name: flash; animation-name: flash } @-webkit-keyframes strobe { 0%, 100%, 20%, 40%, 60%, 80% { opacity: 1 } 10%, 30%, 50%, 70%, 90% { opacity: 0 } } @-moz-keyframes strobe { 0%, 100%, 20%, 40%, 60%, 80% { opacity: 1 } 10%, 30%, 50%, 70%, 90% { opacity: 0 } } @-ms-keyframes strobe { 0%, 100%, 20%, 40%, 60%, 80% { opacity: 1 } 10%, 30%, 50%, 70%, 90% { opacity: 0 } } @-o-keyframes strobe { 0%, 100%, 20%, 40%, 60%, 80% { opacity: 1 } 10%, 30%, 50%, 70%, 90% { opacity: 0 } } @keyframes strobe { 0%, 100%, 20%, 40%, 60%, 80% { opacity: 1 } 10%, 30%, 50%, 70%, 90% { opacity: 0 } } .animate.strobe, .onHoverStrobe:hover, .trigger.strobe { -webkit-animation-name: strobe; -moz-animation-name: strobe; -ms-animation-name: strobe; -o-animation-name: strobe; animation-name: strobe } @-webkit-keyframes shake { 0%, 100% { -webkit-transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translateX(-10px) } 20%, 40%, 60%, 80% { -webkit-transform: translateX(10px) } } @-moz-keyframes shake { 0%, 100% { -moz-transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -moz-transform: translateX(-10px) } 20%, 40%, 60%, 80% { -moz-transform: translateX(10px) } } @-ms-keyframes shake { 0%, 100% { -ms-transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -ms-transform: translateX(-10px) } 20%, 40%, 60%, 80% { -ms-transform: translateX(10px) } } @-o-keyframes shake { 0%, 100% { -o-transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { -o-transform: translateX(-10px) } 20%, 40%, 60%, 80% { -o-transform: translateX(10px) } } @keyframes shake { 0%, 100% { transform: translateX(0) } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px) } 20%, 40%, 60%, 80% { transform: translateX(10px) } } .animate.shake, .onHoverShake:hover, .trigger.shake { -webkit-animation-name: shake; -moz-animation-name: shake; -ms-animation-name: shake; -o-animation-name: shake; animation-name: shake } @-webkit-keyframes bounce { 0%, 100%, 20%, 50%, 80% { -webkit-transform: translateY(0) } 40% { -webkit-transform: translateY(-30px) } 60% { -webkit-transform: translateY(-15px) } } @-moz-keyframes bounce { 0%, 100%, 20%, 50%, 80% { -moz-transform: translateY(0) } 40% { -moz-transform: translateY(-30px) } 60% { -moz-transform: translateY(-15px) } } @-ms-keyframes bounce { 0%, 100%, 20%, 50%, 80% { -ms-transform: translateY(0) } 40% { -ms-transform: translateY(-30px) } 60% { -ms-transform: translateY(-15px) } } @-o-keyframes bounce { 0%, 100%, 20%, 50%, 80% { -o-transform: translateY(0) } 40% { -o-transform: translateY(-30px) } 60% { -o-transform: translateY(-15px) } } @keyframes bounce { 0%, 100%, 20%, 50%, 80% { transform: translateY(0) } 40% { transform: translateY(-30px) } 60% { transform: translateY(-15px) } } .animate.bounce, .onHoverBounce:hover, .trigger.bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; -ms-animation-name: bounce; -o-animation-name: bounce; animation-name: bounce } @-webkit-keyframes tada { 0%, 100% { -webkit-transform: scale(1) rotate(0) } 10%, 20% { -webkit-transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { -webkit-transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { -webkit-transform: scale(1.1) rotate(-3deg) } } @-moz-keyframes tada { 0%, 100% { -moz-transform: scale(1) rotate(0) } 10%, 20% { -moz-transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { -moz-transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { -moz-transform: scale(1.1) rotate(-3deg) } } @-ms-keyframes tada { 0%, 100% { -ms-transform: scale(1) rotate(0) } 10%, 20% { -ms-transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { -ms-transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { -ms-transform: scale(1.1) rotate(-3deg) } } @-o-keyframes tada { 0%, 100% { -o-transform: scale(1) rotate(0) } 10%, 20% { -o-transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { -o-transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { -o-transform: scale(1.1) rotate(-3deg) } } @keyframes tada { 0%, 100% { transform: scale(1) rotate(0) } 10%, 20% { transform: scale(0.9) rotate(-3deg) } 30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg) } 40%, 60%, 80% { transform: scale(1.1) rotate(-3deg) } } .animate.tada, .onHoverTada:hover, .trigger.tada { -webkit-animation-name: tada; -moz-animation-name: tada; -ms-animation-name: tada; -o-animation-name: tada; animation-name: tada } @-webkit-keyframes wave { 20% { -webkit-transform: rotate(15deg) } 40% { -webkit-transform: rotate(-10deg) } 60% { -webkit-transform: rotate(5deg) } 80% { -webkit-transform: rotate(-5deg) } 100% { -webkit-transform: rotate(0deg) } } @-moz-keyframes wave { 20% { -moz-transform: rotate(15deg) } 40% { -moz-transform: rotate(-10deg) } 60% { -moz-transform: rotate(5deg) } 80% { -moz-transform: rotate(-5deg) } 100% { -moz-transform: rotate(0deg) } } @-ms-keyframes wave { 20% { -ms-transform: rotate(15deg) } 40% { -ms-transform: rotate(-10deg) } 60% { -ms-transform: rotate(5deg) } 80% { -ms-transform: rotate(-5deg) } 100% { -ms-transform: rotate(0deg) } } @-o-keyframes wave { 20% { -o-transform: rotate(15deg) } 40% { -o-transform: rotate(-10deg) } 60% { -o-transform: rotate(5deg) } 80% { -o-transform: rotate(-5deg) } 100% { -o-transform: rotate(0deg) } } @keyframes wave { 20% { transform: rotate(15deg) } 40% { transform: rotate(-10deg) } 60% { transform: rotate(5deg) } 80% { transform: rotate(-5deg) } 100% { transform: rotate(0deg) } } .animate.wave, .onHoverWave:hover, .trigger.wave { -webkit-animation-name: wave; -moz-animation-name: wave; -ms-animation-name: wave; -o-animation-name: wave; animation-name: wave } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg) } 100% { -webkit-transform: rotate(360deg) } } @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg) } 100% { -moz-transform: rotate(360deg) } } @-ms-keyframes spin { 0% { -ms-transform: rotate(0deg) } 100% { -ms-transform: rotate(360deg) } } @-o-keyframes spin { 0% { -o-transform: rotate(0deg) } 100% { -o-transform: rotate(360deg) } } @keyframes spin { 0% { transform: rotate(0deg) } 100% { transform: rotate(360deg) } } .animate.spin, .onHoverSpin:hover, .trigger.spin { -webkit-animation-name: spin; -moz-animation-name: spin; -ms-animation-name: spin; -o-animation-name: spin; animation-name: spin } @-webkit-keyframes pullback { 0% { -webkit-transform: rotate(0deg) } 20%, 30% { -webkit-transform: rotate(-45deg) } 100% { -webkit-transform: rotate(360deg) } } @-moz-keyframes pullback { 0% { -moz-transform: rotate(0deg) } 20%, 30% { -moz-transform: rotate(-45deg) } 100% { -moz-transform: rotate(360deg) } } @-ms-keyframes pullback { 0% { -ms-transform: rotate(0deg) } 20%, 30% { -ms-transform: rotate(-45deg) } 100% { -ms-transform: rotate(360deg) } } @-o-keyframes pullback { 0% { -o-transform: rotate(0deg) } 20%, 30% { -o-transform: rotate(-45deg) } 100% { -o-transform: rotate(360deg) } } @keyframes pullback { 0% { transform: rotate(0deg) } 20%, 30% { transform: rotate(-45deg) } 100% { transform: rotate(360deg) } } .animate.pullback, .onHoverPullback:hover, .trigger.pullback { -webkit-animation-name: pullback; -moz-animation-name: pullback; -ms-animation-name: pullback; -o-animation-name: pullback; animation-name: pullback } @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0px) } 15% { -webkit-transform: translateX(-25px) rotate(-5deg) } 30% { -webkit-transform: translateX(20px) rotate(3deg) } 45% { -webkit-transform: translateX(-15px) rotate(-3deg) } 60% { -webkit-transform: translateX(10px) rotate(2deg) } 75% { -webkit-transform: translateX(-5px) rotate(-1deg) } 100% { -webkit-transform: translateX(0px) } } @-moz-keyframes wobble { 0% { -moz-transform: translateX(0px) } 15% { -moz-transform: translateX(-25px) rotate(-5deg) } 30% { -moz-transform: translateX(20px) rotate(3deg) } 45% { -moz-transform: translateX(-15px) rotate(-3deg) } 60% { -moz-transform: translateX(10px) rotate(2deg) } 75% { -moz-transform: translateX(-5px) rotate(-1deg) } 100% { -moz-transform: translateX(0px) } } @-ms-keyframes wobble { 0% { -ms-transform: translateX(0px) } 15% { -ms-transform: translateX(-25px) rotate(-5deg) } 30% { -ms-transform: translateX(20px) rotate(3deg) } 45% { -ms-transform: translateX(-15px) rotate(-3deg) } 60% { -ms-transform: translateX(10px) rotate(2deg) } 75% { -ms-transform: translateX(-5px) rotate(-1deg) } 100% { -ms-transform: translateX(0px) } } @-o-keyframes wobble { 0% { -o-transform: translateX(0px) } 15% { -o-transform: translateX(-25px) rotate(-5deg) } 30% { -o-transform: translateX(20px) rotate(3deg) } 45% { -o-transform: translateX(-15px) rotate(-3deg) } 60% { -o-transform: translateX(10px) rotate(2deg) } 75% { -o-transform: translateX(-5px) rotate(-1deg) } 100% { -o-transform: translateX(0px) } } @keyframes wobble { 0% { transform: translateX(0px) } 15% { transform: translateX(-25px) rotate(-5deg) } 30% { transform: translateX(20px) rotate(3deg) } 45% { transform: translateX(-15px) rotate(-3deg) } 60% { transform: translateX(10px) rotate(2deg) } 75% { transform: translateX(-5px) rotate(-1deg) } 100% { transform: translateX(0px) } } .animate.wobble, .onHoverWobble:hover, .trigger.wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -ms-animation-name: wobble; -o-animation-name: wobble; animation-name: wobble } @-webkit-keyframes pulse { 0%, 100% { -webkit-transform: scale(1) } 50% { -webkit-transform: scale(1.1) } } @-moz-keyframes pulse { 0%, 100% { -moz-transform: scale(1) } 50% { -moz-transform: scale(1.1) } } @-ms-keyframes pulse { 0%, 100% { -ms-transform: scale(1) } 50% { -ms-transform: scale(1.1) } } @-o-keyframes pulse { 0%, 100% { -o-transform: scale(1) } 50% { -o-transform: scale(1.1) } } @keyframes pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.1) } } .animate.pulse, .onHoverPulse:hover, .trigger.pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; -ms-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse } @-webkit-keyframes pulsate { 0%, 100%, 50% { -webkit-transform: scale(1) } 25%, 75% { -webkit-transform: scale(1.1) } } @-moz-keyframes pulsate { 0%, 100%, 50% { -moz-transform: scale(1) } 25%, 75% { -moz-transform: scale(1.1) } } @-ms-keyframes pulsate { 0%, 100%, 50% { -ms-transform: scale(1) } 25%, 75% { -ms-transform: scale(1.1) } } @-o-keyframes pulsate { 0%, 100%, 50% { -o-transform: scale(1) } 25%, 75% { -o-transform: scale(1.1) } } @keyframes pulsate { 0%, 100%, 50% { transform: scale(1) } 25%, 75% { transform: scale(1.1) } } .animate.pulsate, .onHoverPulsate:hover, .trigger.pulsate { -webkit-animation-name: pulsate; -moz-animation-name: pulsate; -ms-animation-name: pulsate; -o-animation-name: pulsate; animation-name: pulsate } @-webkit-keyframes heartbeat { 0%, 30%, 50%, 60%, 80% { -webkit-transform: scale(1) } 40%, 70% { -webkit-transform: scale(1.1) } } @-moz-keyframes heartbeat { 0%, 30%, 50%, 60%, 80% { -moz-transform: scale(1) } 40%, 70% { -moz-transform: scale(1.1) } } @-ms-keyframes heartbeat { 0%, 30%, 50%, 60%, 80% { -ms-transform: scale(1) } 40%, 70% { -ms-transform: scale(1.1) } } @-o-keyframes heartbeat { 0%, 30%, 50%, 60%, 80% { -o-transform: scale(1) } 40%, 70% { -o-transform: scale(1.1) } } @keyframes heartbeat { 0%, 30%, 50%, 60%, 80% { transform: scale(1) } 40%, 70% { transform: scale(1.1) } } .animate.heartbeat, .onHoverHeartbeat:hover, .trigger.heartbeat { -webkit-animation-name: heartbeat; -moz-animation-name: heartbeat; -ms-animation-name: heartbeat; -o-animation-name: heartbeat; animation-name: heartbeat } @-webkit-keyframes panic { 0%, 100% { -webkit-transform: scale(1) rotate(0) } 10%, 60% { -webkit-transform: scale(1.1) rotate(-3deg) } 20%, 40% { -webkit-transform: scale(1) rotate(-3deg) } 30% { -webkit-transform: scale(1.1) rotate(3deg) } 50%, 70%, 90% { -webkit-transform: scale(1) rotate(3deg) } 80% { -webkit-transform: scale(1.1) rotate(-3deg) } } @-moz-keyframes panic { 0%, 100% { -moz-transform: scale(1) rotate(0) } 10%, 60% { -moz-transform: scale(1.1) rotate(-3deg) } 20%, 40% { -moz-transform: scale(1) rotate(-3deg) } 30% { -moz-transform: scale(1.1) rotate(3deg) } 50%, 70%, 90% { -moz-transform: scale(1) rotate(3deg) } 80% { -moz-transform: scale(1.1) rotate(-3deg) } } @-ms-keyframes panic { 0%, 100% { -ms-transform: scale(1) rotate(0) } 10%, 60% { -ms-transform: scale(1.1) rotate(-3deg) } 20%, 40% { -ms-transform: scale(1) rotate(-3deg) } 30% { -ms-transform: scale(1.1) rotate(3deg) } 50%, 70%, 90% { -ms-transform: scale(1) rotate(3deg) } 80% { -ms-transform: scale(1.1) rotate(-3deg) } } @-o-keyframes panic { 0%, 100% { -o-transform: scale(1) rotate(0) } 10%, 60% { -o-transform: scale(1.1) rotate(-3deg) } 20%, 40% { -o-transform: scale(1) rotate(-3deg) } 30% { -o-transform: scale(1.1) rotate(3deg) } 50%, 70%, 90% { -o-transform: scale(1) rotate(3deg) } 80% { -o-transform: scale(1.1) rotate(-3deg) } } @keyframes panic { 0%, 100% { transform: scale(1) rotate(0) } 10%, 60% { transform: scale(1.1) rotate(-3deg) } 20%, 40% { transform: scale(1) rotate(-3deg) } 30% { transform: scale(1.1) rotate(3deg) } 50%, 70%, 90% { transform: scale(1) rotate(3deg) } 80% { transform: scale(1.1) rotate(-3deg) } } .animate.panic, .onHoverPanic:hover, .trigger.panic { -webkit-animation-name: panic; -moz-animation-name: panic; -ms-animation-name: panic; -o-animation-name: panic; animation-name: panic } @-webkit-keyframes explode { 0% { -webkit-transform: scale(1) } 20% { -webkit-transform: scale(.3) rotate(-3deg) } 60% { -webkit-transform: scale(.3) rotate(-5deg) } 30% { -webkit-transform: scale(.4) rotate(8deg) } 40% { -webkit-transform: scale(.3) rotate(-11deg) } 50% { -webkit-transform: scale(.4) rotate(14deg) } 70% { -webkit-transform: scale(.2) rotate(17deg) } 80% { opacity: 1; -webkit-transform: scale(.2) rotate(-20deg) } 100% { opacity: 0; -webkit-transform: scale(10) rotate(360deg) } } @-moz-keyframes explode { 0% { opacity: 1; -moz-transform: scale(1) } 20% { -moz-transform: scale(.3) rotate(-3deg) } 60% { -moz-transform: scale(.3) rotate(-5deg) } 30% { -moz-transform: scale(.4) rotate(8deg) } 40% { -moz-transform: scale(.3) rotate(-11deg) } 50% { -moz-transform: scale(.4) rotate(14deg) } 70% { -moz-transform: scale(.2) rotate(17deg) } 80% { opacity: 1; -moz-transform: scale(.2) rotate(-20deg) } 100% { opacity: 0; -moz-transform: scale(10) rotate(360deg) } } @-ms-keyframes explode { 0% { opacity: 1; -ms-transform: scale(1) } 20% { -ms-transform: scale(.3) rotate(-3deg) } 60% { -ms-transform: scale(.3) rotate(-5deg) } 30% { -ms-transform: scale(.4) rotate(8deg) } 40% { -ms-transform: scale(.3) rotate(-11deg) } 50% { -ms-transform: scale(.4) rotate(14deg) } 70% { -ms-transform: scale(.2) rotate(17deg) } 80% { opacity: 1; -ms-transform: scale(.2) rotate(-20deg) } 100% { opacity: 0; -ms-transform: scale(10) rotate(360deg) } } @-o-keyframes explode { 0% { opacity: 1; -o-transform: scale(1) } 20% { -o-transform: scale(.3) rotate(-3deg) } 60% { -o-transform: scale(.3) rotate(-5deg) } 30% { -o-transform: scale(.4) rotate(8deg) } 40% { -o-transform: scale(.3) rotate(-11deg) } 50% { -o-transform: scale(.4) rotate(14deg) } 70% { -o-transform: scale(.2) rotate(17deg) } 80% { opacity: 1; -o-transform: scale(.2) rotate(-20deg) } 100% { opacity: 0; -o-transform: scale(10) rotate(360deg) } } @keyframes explode { 0% { opacity: 1; transform: scale(1) } 20% { transform: scale(.3) rotate(-3deg) } 60% { transform: scale(.3) rotate(-5deg) } 30% { transform: scale(.4) rotate(8deg) } 40% { transform: scale(.3) rotate(-11deg) } 50% { transform: scale(.4) rotate(14deg) } 70% { transform: scale(.2) rotate(17deg) } 80% { opacity: 1; transform: scale(.2) rotate(-20deg) } 100% { opacity: 0; transform: scale(10) rotate(360deg) } } .animate.explode, .trigger.explode { -webkit-animation-name: explode; -moz-animation-name: explode; -ms-animation-name: explode; -o-animation-name: explode; animation-name: explode } }