/* 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: 1 s; - moz - animation - duration: 1 s; - ms - animation - duration: 1 s; - o - animation - duration: 1 s;animation - duration: 1 s; - 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(200 px) } 100 % { opacity: 1; - webkit - transform: translateY(0) } }@ - moz - keyframes fadeInUp { 0 % { opacity: 0; - moz - transform: translateY(200 px) } 100 % { opacity: 1; - moz - transform: translateY(0) } }@ - ms - keyframes fadeInUp { 0 % { opacity: 0; - ms - transform: translateY(200 px) } 100 % { opacity: 1; - ms - transform: translateY(0) } }@ - o - keyframes fadeInUp { 0 % { opacity: 0; - o - transform: translateY(200 px) } 100 % { opacity: 1; - o - transform: translateY(0) } }@ keyframes fadeInUp { 0 % { opacity: 0;transform: translateY(200 px) } 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(-200 px) } 100 % { opacity: 1; - webkit - transform: translateY(0) } }@ - moz - keyframes fadeInDown { 0 % { opacity: 0; - moz - transform: translateY(-200 px) } 100 % { opacity: 1; - moz - transform: translateY(0) } }@ - ms - keyframes fadeInDown { 0 % { opacity: 0; - ms - transform: translateY(-200 px) } 100 % { opacity: 1; - ms - transform: translateY(0) } }@ - o - keyframes fadeInDown { 0 % { opacity: 0; - o - transform: translateY(-200 px) } 100 % { opacity: 1; - o - transform: translateY(0) } }@ keyframes fadeInDown { 0 % { opacity: 0;transform: translateY(-200 px) } 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(-200 px) } 100 % { opacity: 1; - webkit - transform: translateX(0) } }@ - moz - keyframes fadeInLeft { 0 % { opacity: 0; - moz - transform: translateX(-200 px) } 100 % { opacity: 1; - moz - transform: translateX(0) } }@ - ms - keyframes fadeInLeft { 0 % { opacity: 0; - ms - transform: translateX(-200 px) } 100 % { opacity: 1; - ms - transform: translateX(0) } }@ - o - keyframes fadeInLeft { 0 % { opacity: 0; - o - transform: translateX(-200 px) } 100 % { opacity: 1; - o - transform: translateX(0) } }@ keyframes fadeInLeft { 0 % { opacity: 0;transform: translateX(-200 px) } 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(200 px) } 100 % { opacity: 1; - webkit - transform: translateX(0) } }@ - moz - keyframes fadeInRight { 0 % { opacity: 0; - moz - transform: translateX(200 px) } 100 % { opacity: 1; - moz - transform: translateX(0) } }@ - ms - keyframes fadeInRight { 0 % { opacity: 0; - ms - transform: translateX(200 px) } 100 % { opacity: 1; - ms - transform: translateX(0) } }@ - o - keyframes fadeInRight { 0 % { opacity: 0; - o - transform: translateX(200 px) } 100 % { opacity: 1; - o - transform: translateX(0) } }@ keyframes fadeInRight { 0 % { opacity: 0;transform: translateX(200 px) } 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(1000 px) } 100 % { opacity: 1; - webkit - transform: translateY(0) } }@ - moz - keyframes fadeInUpLarge { 0 % { opacity: 0; - moz - transform: translateY(1000 px) } 100 % { opacity: 1; - moz - transform: translateY(0) } }@ - ms - keyframes fadeInUpLarge { 0 % { opacity: 0; - ms - transform: translateY(1000 px) } 100 % { opacity: 1; - ms - transform: translateY(0) } }@ - o - keyframes fadeInUpLarge { 0 % { opacity: 0; - o - transform: translateY(1000 px) } 100 % { opacity: 1; - o - transform: translateY(0) } }@ keyframes fadeInUpLarge { 0 % { opacity: 0;transform: translateY(1000 px) } 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(-1000 px) } 100 % { opacity: 1; - webkit - transform: translateY(0) } }@ - moz - keyframes fadeInDownLarge { 0 % { opacity: 0; - moz - transform: translateY(-1000 px) } 100 % { opacity: 1; - moz - transform: translateY(0) } }@ - ms - keyframes fadeInDownLarge { 0 % { opacity: 0; - ms - transform: translateY(-1000 px) } 100 % { opacity: 1; - ms - transform: translateY(0) } }@ - o - keyframes fadeInDownLarge { 0 % { opacity: 0; - o - transform: translateY(-1000 px) } 100 % { opacity: 1; - o - transform: translateY(0) } }@ keyframes fadeInDownLarge { 0 % { opacity: 0;transform: translateY(-1000 px) } 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(-1000 px) } 100 % { opacity: 1; - webkit - transform: translateX(0) } }@ - moz - keyframes fadeInLeftLarge { 0 % { opacity: 0; - moz - transform: translateX(-1000 px) } 100 % { opacity: 1; - moz - transform: translateX(0) } }@ - ms - keyframes fadeInLeftLarge { 0 % { opacity: 0; - ms - transform: translateX(-1000 px) } 100 % { opacity: 1; - ms - transform: translateX(0) } }@ - o - keyframes fadeInLeftLarge { 0 % { opacity: 0; - o - transform: translateX(-1000 px) } 100 % { opacity: 1; - o - transform: translateX(0) } }@ keyframes fadeInLeftLarge { 0 % { opacity: 0;transform: translateX(-1000 px) } 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(1000 px) } 100 % { opacity: 1; - webkit - transform: translateX(0) } }@ - moz - keyframes fadeInRightLarge { 0 % { opacity: 0; - moz - transform: translateX(1000 px) } 100 % { opacity: 1; - moz - transform: translateX(0) } }@ - ms - keyframes fadeInRightLarge { 0 % { opacity: 0; - ms - transform: translateX(1000 px) } 100 % { opacity: 1; - ms - transform: translateX(0) } }@ - o - keyframes fadeInRightLarge { 0 % { opacity: 0; - o - transform: translateX(1000 px) } 100 % { opacity: 1; - o - transform: translateX(0) } }@ keyframes fadeInRightLarge { 0 % { opacity: 0;transform: translateX(1000 px) } 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(-200 px) } }@ - moz - keyframes fadeOutUp { 0 % { opacity: 1; - moz - transform: translateY(0) } 100 % { opacity: 0; - moz - transform: translateY(-200 px) } }@ - ms - keyframes fadeOutUp { 0 % { opacity: 1; - ms - transform: translateY(0) } 100 % { opacity: 0; - ms - transform: translateY(-200 px) } }@ - o - keyframes fadeOutUp { 0 % { opacity: 1; - o - transform: translateY(0) } 100 % { opacity: 0; - o - transform: translateY(-200 px) } }@ keyframes fadeOutUp { 0 % { opacity: 1;transform: translateY(0) } 100 % { opacity: 0;transform: translateY(-200 px) } }.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(200 px) } }@ - moz - keyframes fadeOutDown { 0 % { opacity: 1; - moz - transform: translateY(0) } 100 % { opacity: 0; - moz - transform: translateY(200 px) } }@ - ms - keyframes fadeOutDown { 0 % { opacity: 1; - ms - transform: translateY(0) } 100 % { opacity: 0; - ms - transform: translateY(200 px) } }@ - o - keyframes fadeOutDown { 0 % { opacity: 1; - o - transform: translateY(0) } 100 % { opacity: 0; - o - transform: translateY(200 px) } }@ keyframes fadeOutDown { 0 % { opacity: 1;transform: translateY(0) } 100 % { opacity: 0;transform: translateY(200 px) } }.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(-200 px) } }@ - moz - keyframes fadeOutLeft { 0 % { opacity: 0; - moz - transform: translateX(0) } 100 % { opacity: 1; - moz - transform: translateX(-200 px) } }@ - ms - keyframes fadeOutLeft { 0 % { opacity: 0; - ms - transform: translateX(0) } 100 % { opacity: 1; - ms - transform: translateX(-200 px) } }@ - o - keyframes fadeOutLeft { 0 % { opacity: 0; - o - transform: translateX(0) } 100 % { opacity: 1; - o - transform: translateX(-200 px) } }@ keyframes fadeOutLeft { 0 % { opacity: 0;transform: translateX(0) } 100 % { opacity: 1;transform: translateX(-200 px) } }.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(200 px) } }@ - moz - keyframes fadeOutRight { 0 % { opacity: 0; - moz - transform: translateX(0) } 100 % { opacity: 1; - moz - transform: translateX(200 px) } }@ - ms - keyframes fadeOutRight { 0 % { opacity: 0; - ms - transform: translateX(0) } 100 % { opacity: 1; - ms - transform: translateX(200 px) } }@ - o - keyframes fadeOutRight { 0 % { opacity: 0; - o - transform: translateX(0) } 100 % { opacity: 1; - o - transform: translateX(200 px) } }@ keyframes fadeOutRight { 0 % { opacity: 0;transform: translateX(0) } 100 % { opacity: 1;transform: translateX(200 px) } }.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(-1000 px) } }@ - moz - keyframes fadeOutUpLarge { 0 % { opacity: 1; - moz - transform: translateY(0) } 100 % { opacity: 0; - moz - transform: translateY(-1000 px) } }@ - ms - keyframes fadeOutUpLarge { 0 % { opacity: 1; - ms - transform: translateY(0) } 100 % { opacity: 0; - ms - transform: translateY(-1000 px) } }@ - o - keyframes fadeOutUpLarge { 0 % { opacity: 1; - o - transform: translateY(0) } 100 % { opacity: 0; - o - transform: translateY(-1000 px) } }@ keyframes fadeOutUpLarge { 0 % { opacity: 1;transform: translateY(0) } 100 % { opacity: 0;transform: translateY(-1000 px) } }.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(1000 px) } }@ - moz - keyframes fadeOutDownLarge { 0 % { opacity: 1; - moz - transform: translateY(0) } 100 % { opacity: 0; - moz - transform: translateY(1000 px) } }@ - ms - keyframes fadeOutDownLarge { 0 % { opacity: 1; - ms - transform: translateY(0) } 100 % { opacity: 0; - ms - transform: translateY(1000 px) } }@ - o - keyframes fadeOutDownLarge { 0 % { opacity: 1; - o - transform: translateY(0) } 100 % { opacity: 0; - o - transform: translateY(1000 px) } }@ keyframes fadeOutDownLarge { 0 % { opacity: 1;transform: translateY(0) } 100 % { opacity: 0;transform: translateY(1000 px) } }.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(-1000 px) } }@ - moz - keyframes fadeOutLeftLarge { 0 % { opacity: 0; - moz - transform: translateX(0) } 100 % { opacity: 1; - moz - transform: translateX(-1000 px) } }@ - ms - keyframes fadeOutLeftLarge { 0 % { opacity: 0; - ms - transform: translateX(0) } 100 % { opacity: 1; - ms - transform: translateX(-1000 px) } }@ - o - keyframes fadeOutLeftLarge { 0 % { opacity: 0; - o - transform: translateX(0) } 100 % { opacity: 1; - o - transform: translateX(-1000 px) } }@ keyframes fadeOutLeftLarge { 0 % { opacity: 0;transform: translateX(0) } 100 % { opacity: 1;transform: translateX(-1000 px) } }.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(1000 px) } }@ - moz - keyframes fadeOutRightLarge { 0 % { opacity: 0; - moz - transform: translateX(0) } 100 % { opacity: 1; - moz - transform: translateX(1000 px) } }@ - ms - keyframes fadeOutRightLarge { 0 % { opacity: 0; - ms - transform: translateX(0) } 100 % { opacity: 1; - ms - transform: translateX(1000 px) } }@ - o - keyframes fadeOutRightLarge { 0 % { opacity: 0; - o - transform: translateX(0) } 100 % { opacity: 1; - o - transform: translateX(1000 px) } }@ keyframes fadeOutRightLarge { 0 % { opacity: 0;transform: translateX(0) } 100 % { opacity: 1;transform: translateX(1000 px) } }.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(200 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateY(0) } }@ - moz - keyframes zoomInUp { 0 % { opacity: 0; - moz - transform: scale(0) translateY(200 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateY(0) } }@ - ms - keyframes zoomInUp { 0 % { opacity: 0; - ms - transform: scale(0) translateY(200 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateY(0) } }@ - o - keyframes zoomInUp { 0 % { opacity: 0; - o - transform: scale(0) translateY(200 px) } 100 % { opacity: 1; - o - transform: scale(1) translateY(0) } }@ keyframes zoomInUp { 0 % { opacity: 0;transform: scale(0) translateY(200 px) } 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(-200 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateY(0) } }@ - moz - keyframes zoomInDown { 0 % { opacity: 0; - moz - transform: scale(0) translateY(-200 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateY(0) } }@ - ms - keyframes zoomInDown { 0 % { opacity: 0; - ms - transform: scale(0) translateY(-200 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateY(0) } }@ - o - keyframes zoomInDown { 0 % { opacity: 0; - o - transform: scale(0) translateY(-200 px) } 100 % { opacity: 1; - o - transform: scale(1) translateY(0) } }@ keyframes zoomInDown { 0 % { opacity: 0;transform: scale(0) translateY(-200 px) } 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(-200 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateX(0) } }@ - moz - keyframes zoomInLeft { 0 % { opacity: 0; - moz - transform: scale(0) translateX(-200 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(0) } }@ - ms - keyframes zoomInLeft { 0 % { opacity: 0; - ms - transform: scale(0) translateX(-200 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(0) } }@ - o - keyframes zoomInLeft { 0 % { opacity: 0; - o - transform: scale(0) translateX(-200 px) } 100 % { opacity: 1; - o - transform: scale(1) translateX(0) } }@ keyframes zoomInLeft { 0 % { opacity: 0;transform: scale(0) translateX(-200 px) } 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(200 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateX(0) } }@ - moz - keyframes zoomInRight { 0 % { opacity: 0; - moz - transform: scale(0) translateX(200 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(0) } }@ - ms - keyframes zoomInRight { 0 % { opacity: 0; - ms - transform: scale(0) translateX(200 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(0) } }@ - o - keyframes zoomInRight { 0 % { opacity: 0; - o - transform: scale(0) translateX(200 px) } 100 % { opacity: 1; - o - transform: scale(1) translateX(0) } }@ keyframes zoomInRight { 0 % { opacity: 0;transform: scale(0) translateX(200 px) } 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(1000 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateY(0) } }@ - moz - keyframes zoomInUpLarge { 0 % { opacity: 0; - moz - transform: scale(0) translateY(1000 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateY(0) } }@ - ms - keyframes zoomInUpLarge { 0 % { opacity: 0; - ms - transform: scale(0) translateY(1000 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateY(0) } }@ - o - keyframes zoomInUpLarge { 0 % { opacity: 0; - o - transform: scale(0) translateY(1000 px) } 100 % { opacity: 1; - o - transform: scale(1) translateY(0) } }@ keyframes zoomInUpLarge { 0 % { opacity: 0;transform: scale(0) translateY(1000 px) } 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(-1000 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateY(0) } }@ - moz - keyframes zoomInDownLarge { 0 % { opacity: 0; - moz - transform: scale(0) translateY(-1000 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateY(0) } }@ - ms - keyframes zoomInDownLarge { 0 % { opacity: 0; - ms - transform: scale(0) translateY(-1000 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateY(0) } }@ - o - keyframes zoomInDownLarge { 0 % { opacity: 0; - o - transform: scale(0) translateY(-1000 px) } 100 % { opacity: 1; - o - transform: scale(1) translateY(0) } }@ keyframes zoomInDownLarge { 0 % { opacity: 0;transform: scale(0) translateY(-1000 px) } 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(-1000 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateX(0) } }@ - moz - keyframes zoomInLeftLarge { 0 % { opacity: 0; - moz - transform: scale(0) translateX(-1000 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(0) } }@ - ms - keyframes zoomInLeftLarge { 0 % { opacity: 0; - ms - transform: scale(0) translateX(-1000 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(0) } }@ - o - keyframes zoomInLeftLarge { 0 % { opacity: 0; - o - transform: scale(0) translateX(-1000 px) } 100 % { opacity: 1; - o - transform: scale(1) translateX(0) } }@ keyframes zoomInLeftLarge { 0 % { opacity: 0;transform: scale(0) translateX(-1000 px) } 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(1000 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateX(0) } }@ - moz - keyframes zoomInRightLarge { 0 % { opacity: 0; - moz - transform: scale(0) translateX(1000 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(0) } }@ - ms - keyframes zoomInRightLarge { 0 % { opacity: 0; - ms - transform: scale(0) translateX(1000 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(0) } }@ - o - keyframes zoomInRightLarge { 0 % { opacity: 0; - o - transform: scale(0) translateX(1000 px) } 100 % { opacity: 1; - o - transform: scale(1) translateX(0) } }@ keyframes zoomInRightLarge { 0 % { opacity: 0;transform: scale(0) translateX(1000 px) } 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(-200 px) } }@ - moz - keyframes zoomOutUp { 0 % { opacity: 1; - moz - transform: scale(1) translateY(0) } 100 % { opacity: 0; - moz - transform: scale(0) translateY(-200 px) } }@ - ms - keyframes zoomOutUp { 0 % { opacity: 1; - ms - transform: scale(1) translateY(0) } 100 % { opacity: 0; - ms - transform: scale(0) translateY(-200 px) } }@ - o - keyframes zoomOutUp { 0 % { opacity: 1; - o - transform: scale(1) translateY(0) } 100 % { opacity: 0; - o - transform: scale(0) translateY(-200 px) } }@ keyframes zoomOutUp { 0 % { opacity: 1;transform: scale(1) translateY(0) } 100 % { opacity: 0;transform: scale(0) translateY(-200 px) } }.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(200 px) } }@ - moz - keyframes zoomOutDown { 0 % { opacity: 1; - moz - transform: scale(1) translateY(0) } 100 % { opacity: 0; - moz - transform: scale(0) translateY(200 px) } }@ - ms - keyframes zoomOutDown { 0 % { opacity: 1; - ms - transform: scale(1) translateY(0) } 100 % { opacity: 0; - ms - transform: scale(0) translateY(200 px) } }@ - o - keyframes zoomOutDown { 0 % { opacity: 1; - o - transform: scale(1) translateY(0) } 100 % { opacity: 0; - o - transform: scale(0) translateY(200 px) } }@ keyframes zoomOutDown { 0 % { opacity: 1;transform: scale(1) translateY(0) } 100 % { opacity: 0;transform: scale(0) translateY(200 px) } }.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(-200 px) } }@ - moz - keyframes zoomOutLeft { 0 % { opacity: 0; - moz - transform: scale(0) translateX(0) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(-200 px) } }@ - ms - keyframes zoomOutLeft { 0 % { opacity: 0; - ms - transform: scale(0) translateX(0) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(-200 px) } }@ - o - keyframes zoomOutLeft { 0 % { opacity: 0; - o - transform: scale(0) translateX(0) } 100 % { opacity: 1; - o - transform: scale(1) translateX(-200 px) } }@ keyframes zoomOutLeft { 0 % { opacity: 0;transform: scale(0) translateX(0) } 100 % { opacity: 1;transform: scale(1) translateX(-200 px) } }.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(200 px) } }@ - moz - keyframes zoomOutRight { 0 % { opacity: 0; - moz - transform: scale(0) translateX(0) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(200 px) } }@ - ms - keyframes zoomOutRight { 0 % { opacity: 0; - ms - transform: scale(0) translateX(0) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(200 px) } }@ - o - keyframes zoomOutRight { 0 % { opacity: 0; - o - transform: scale(0) translateX(0) } 100 % { opacity: 1; - o - transform: scale(1) translateX(200 px) } }@ keyframes zoomOutRight { 0 % { opacity: 0;transform: scale(0) translateX(0) } 100 % { opacity: 1;transform: scale(1) translateX(200 px) } }.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(-1000 px) } }@ - moz - keyframes zoomOutUpLarge { 0 % { opacity: 1; - moz - transform: scale(1) translateY(0) } 100 % { opacity: 0; - moz - transform: scale(0) translateY(-1000 px) } }@ - ms - keyframes zoomOutUpLarge { 0 % { opacity: 1; - ms - transform: scale(1) translateY(0) } 100 % { opacity: 0; - ms - transform: scale(0) translateY(-1000 px) } }@ - o - keyframes zoomOutUpLarge { 0 % { opacity: 1; - o - transform: scale(1) translateY(0) } 100 % { opacity: 0; - o - transform: scale(0) translateY(-1000 px) } }@ keyframes zoomOutUpLarge { 0 % { opacity: 1;transform: scale(1) translateY(0) } 100 % { opacity: 0;transform: scale(0) translateY(-1000 px) } }.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(1000 px) } }@ - moz - keyframes zoomOutDownLarge { 0 % { opacity: 1; - moz - transform: scale(1) translateY(0) } 100 % { opacity: 0; - moz - transform: scale(0) translateY(1000 px) } }@ - ms - keyframes zoomOutDownLarge { 0 % { opacity: 1; - ms - transform: scale(1) translateY(0) } 100 % { opacity: 0; - ms - transform: scale(0) translateY(1000 px) } }@ - o - keyframes zoomOutDownLarge { 0 % { opacity: 1; - o - transform: scale(1) translateY(0) } 100 % { opacity: 0; - o - transform: scale(0) translateY(1000 px) } }@ keyframes zoomOutDownLarge { 0 % { opacity: 1;transform: scale(1) translateY(0) } 100 % { opacity: 0;transform: scale(0) translateY(1000 px) } }.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(-1000 px) } }@ - moz - keyframes zoomOutLeftLarge { 0 % { opacity: 0; - moz - transform: scale(0) translateX(0) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(-1000 px) } }@ - ms - keyframes zoomOutLeftLarge { 0 % { opacity: 0; - ms - transform: scale(0) translateX(0) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(-1000 px) } }@ - o - keyframes zoomOutLeftLarge { 0 % { opacity: 0; - o - transform: scale(0) translateX(0) } 100 % { opacity: 1; - o - transform: scale(1) translateX(-1000 px) } }@ keyframes zoomOutLeftLarge { 0 % { opacity: 0;transform: scale(0) translateX(0) } 100 % { opacity: 1;transform: scale(1) translateX(-1000 px) } }.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(1000 px) } }@ - moz - keyframes zoomOutRightLarge { 0 % { opacity: 0; - moz - transform: scale(0) translateX(0) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(1000 px) } }@ - ms - keyframes zoomOutRightLarge { 0 % { opacity: 0; - ms - transform: scale(0) translateX(0) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(1000 px) } }@ - o - keyframes zoomOutRightLarge { 0 % { opacity: 0; - o - transform: scale(0) translateX(0) } 100 % { opacity: 1; - o - transform: scale(1) translateX(1000 px) } }@ keyframes zoomOutRightLarge { 0 % { opacity: 0;transform: scale(0) translateX(0) } 100 % { opacity: 1;transform: scale(1) translateX(1000 px) } }.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(200 px) } 60 % { opacity: 1; - webkit - transform: scale(1.1) translateY(-40 px) } 80 % { opacity: 1; - webkit - transform: scale(.9) translateY(20 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateY(0) } }@ - moz - keyframes bounceInUp { 0 % { opacity: 0; - moz - transform: scale(0) translateY(200 px) } 60 % { opacity: 1; - moz - transform: scale(1.1) translateY(-40 px) } 80 % { opacity: 1; - moz - transform: scale(.9) translateY(20 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateY(0) } }@ - ms - keyframes bounceInUp { 0 % { opacity: 0; - ms - transform: scale(0) translateY(200 px) } 60 % { opacity: 1; - ms - transform: scale(1.1) translateY(-40 px) } 80 % { opacity: 1; - ms - transform: scale(.9) translateY(20 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateY(0) } }@ - o - keyframes bounceInUp { 0 % { opacity: 0; - o - transform: scale(0) translateY(200 px) } 60 % { opacity: 1; - o - transform: scale(1.1) translateY(-40 px) } 80 % { opacity: 1; - o - transform: scale(.9) translateY(20 px) } 100 % { opacity: 1; - o - transform: scale(1) translateY(0) } }@ keyframes bounceInUp { 0 % { opacity: 0;transform: scale(0) translateY(200 px) } 60 % { opacity: 1;transform: scale(1.1) translateY(-40 px) } 80 % { opacity: 1;transform: scale(.9) translateY(20 px) } 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(-200 px) } 60 % { opacity: 1; - webkit - transform: scale(1.1) translateY(40 px) } 80 % { opacity: 1; - webkit - transform: scale(.9) translateY(-20 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateY(0) } }@ - moz - keyframes bounceInDown { 0 % { opacity: 0; - moz - transform: scale(0) translateY(-200 px) } 60 % { opacity: 1; - moz - transform: scale(1.1) translateY(40 px) } 80 % { opacity: 1; - moz - transform: scale(.9) translateY(-20 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateY(0) } }@ - ms - keyframes bounceInDown { 0 % { opacity: 0; - ms - transform: scale(0) translateY(-200 px) } 60 % { opacity: 1; - ms - transform: scale(1.1) translateY(40 px) } 80 % { opacity: 1; - ms - transform: scale(.9) translateY(-20 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateY(0) } }@ - o - keyframes bounceInDown { 0 % { opacity: 0; - o - transform: scale(0) translateY(-200 px) } 60 % { opacity: 1; - o - transform: scale(1.1) translateY(40 px) } 80 % { opacity: 1; - o - transform: scale(.9) translateY(-20 px) } 100 % { opacity: 1; - o - transform: scale(1) translateY(0) } }@ keyframes bounceInDown { 0 % { opacity: 0;transform: scale(0) translateY(-200 px) } 60 % { opacity: 1;transform: scale(1.1) translateY(40 px) } 80 % { opacity: 1;transform: scale(.9) translateY(-20 px) } 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(-200 px) } 60 % { opacity: 1; - webkit - transform: scale(1.1) translateX(40 px) } 80 % { opacity: 1; - webkit - transform: scale(.9) translateX(-20 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateX(0) } }@ - moz - keyframes bounceInLeft { 0 % { opacity: 0; - moz - transform: scale(0) translateX(-200 px) } 60 % { opacity: 1; - moz - transform: scale(1.1) translateX(40 px) } 80 % { opacity: 1; - moz - transform: scale(.9) translateX(-20 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(0) } }@ - ms - keyframes bounceInLeft { 0 % { opacity: 0; - ms - transform: scale(0) translateX(-200 px) } 60 % { opacity: 1; - ms - transform: scale(1.1) translateX(40 px) } 80 % { opacity: 1; - ms - transform: scale(.9) translateX(-20 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(0) } }@ - o - keyframes bounceInLeft { 0 % { opacity: 0; - o - transform: scale(0) translateX(-200 px) } 60 % { opacity: 1; - o - transform: scale(1.1) translateX(40 px) } 80 % { opacity: 1; - o - transform: scale(.9) translateX(-20 px) } 100 % { opacity: 1; - o - transform: scale(1) translateX(0) } }@ keyframes bounceInLeft { 0 % { opacity: 0;transform: scale(0) translateX(-200 px) } 60 % { opacity: 1;transform: scale(1.1) translateX(40 px) } 80 % { opacity: 1;transform: scale(.9) translateX(-20 px) } 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(200 px) } 60 % { opacity: 1; - webkit - transform: scale(1.1) translateX(-40 px) } 80 % { opacity: 1; - webkit - transform: scale(.9) translateX(20 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateX(0) } }@ - moz - keyframes bounceInRight { 0 % { opacity: 0; - moz - transform: scale(0) translateX(200 px) } 60 % { opacity: 1; - moz - transform: scale(1.1) translateX(-40 px) } 80 % { opacity: 1; - moz - transform: scale(.9) translateX(20 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(0) } }@ - ms - keyframes bounceInRight { 0 % { opacity: 0; - ms - transform: scale(0) translateX(200 px) } 60 % { opacity: 1; - ms - transform: scale(1.1) translateX(-40 px) } 80 % { opacity: 1; - ms - transform: scale(.9) translateX(20 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(0) } }@ - o - keyframes bounceInRight { 0 % { opacity: 0; - o - transform: scale(0) translateX(200 px) } 60 % { opacity: 1; - o - transform: scale(1.1) translateX(-40 px) } 80 % { opacity: 1; - o - transform: scale(.9) translateX(20 px) } 100 % { opacity: 1; - o - transform: scale(1) translateX(0) } }@ keyframes bounceInRight { 0 % { opacity: 0;transform: scale(0) translateX(200 px) } 60 % { opacity: 1;transform: scale(1.1) translateX(-40 px) } 80 % { opacity: 1;transform: scale(.9) translateX(20 px) } 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(40 px) } 100 % { opacity: 0; - webkit - transform: translateY(-200 px) } }@ - moz - keyframes bounceOutUp { 0 % { opacity: 1; - moz - transform: translateY(0) } 20 % { opacity: 1; - moz - transform: translateY(40 px) } 100 % { opacity: 0; - moz - transform: translateY(-200 px) } }@ - ms - keyframes bounceOutUp { 0 % { opacity: 1; - ms - transform: translateY(0) } 20 % { opacity: 1; - ms - transform: translateY(40 px) } 100 % { opacity: 0; - ms - transform: translateY(-200 px) } }@ - o - keyframes bounceOutUp { 0 % { opacity: 1; - o - transform: translateY(0) } 20 % { opacity: 1; - o - transform: translateY(40 px) } 100 % { opacity: 0; - o - transform: translateY(-200 px) } }@ keyframes bounceOutUp { 0 % { opacity: 1;transform: translateY(0) } 20 % { opacity: 1;transform: translateY(40 px) } 100 % { opacity: 0;transform: translateY(-200 px) } }.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(-40 px) } 100 % { opacity: 0; - webkit - transform: translateY(200 px) } }@ - moz - keyframes bounceOutDown { 0 % { opacity: 1; - moz - transform: translateY(0) } 20 % { opacity: 1; - moz - transform: translateY(-40 px) } 100 % { opacity: 0; - moz - transform: translateY(200 px) } }@ - ms - keyframes bounceOutDown { 0 % { opacity: 1; - ms - transform: translateY(0) } 20 % { opacity: 1; - ms - transform: translateY(-40 px) } 100 % { opacity: 0; - ms - transform: translateY(200 px) } }@ - o - keyframes bounceOutDown { 0 % { opacity: 1; - o - transform: translateY(0) } 20 % { opacity: 1; - o - transform: translateY(-40 px) } 100 % { opacity: 0; - o - transform: translateY(200 px) } }@ keyframes bounceOutDown { 0 % { opacity: 1;transform: translateY(0) } 20 % { opacity: 1;transform: translateY(-40 px) } 100 % { opacity: 0;transform: translateY(200 px) } }.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(40 px) } 100 % { opacity: 0; - webkit - transform: translateX(-200 px) } }@ - moz - keyframes bounceOutLeft { 0 % { opacity: 1; - moz - transform: translateX(0) } 20 % { opacity: 1; - moz - transform: translateX(40 px) } 100 % { opacity: 0; - moz - transform: translateX(-200 px) } }@ - ms - keyframes bounceOutLeft { 0 % { opacity: 1; - ms - transform: translateX(0) } 20 % { opacity: 1; - ms - transform: translateX(40 px) } 100 % { opacity: 0; - ms - transform: translateX(-200 px) } }@ - o - keyframes bounceOutLeft { 0 % { opacity: 1; - o - transform: translateX(0) } 20 % { opacity: 1; - o - transform: translateX(40 px) } 100 % { opacity: 0; - o - transform: translateX(-200 px) } }@ keyframes bounceOutLeft { 0 % { opacity: 1;transform: translateX(0) } 20 % { opacity: 1;transform: translateX(40 px) } 100 % { opacity: 0;transform: translateX(-200 px) } }.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(-40 px) } 100 % { opacity: 0; - webkit - transform: translateX(200 px) } }@ - moz - keyframes bounceOutRight { 0 % { opacity: 1; - moz - transform: translateX(0) } 20 % { opacity: 1; - moz - transform: translateX(-40 px) } 100 % { opacity: 0; - moz - transform: translateX(200 px) } }@ - ms - keyframes bounceOutRight { 0 % { opacity: 1; - ms - transform: translateX(0) } 20 % { opacity: 1; - ms - transform: translateX(-40 px) } 100 % { opacity: 0; - ms - transform: translateX(200 px) } }@ - o - keyframes bounceOutRight { 0 % { opacity: 1; - o - transform: translateX(0) } 20 % { opacity: 1; - o - transform: translateX(-40 px) } 100 % { opacity: 0; - o - transform: translateX(200 px) } }@ keyframes bounceOutRight { 0 % { opacity: 1;transform: translateX(0) } 20 % { opacity: 1;transform: translateX(-40 px) } 100 % { opacity: 0;transform: translateX(200 px) } }.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(-380 deg); 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(-380 deg); 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(-380 deg); 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(-380 deg); opacity: 0 } 100 % { -o - transform - origin: center center; - o - transform: rotate(0); opacity: 1 } }@ keyframes spinLeft { 0 % { transform - origin: center center; transform: rotate(-380 deg); 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(380 deg); 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(380 deg); 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(380 deg); 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(380 deg); opacity: 0 } 100 % { -o - transform - origin: center center; - o - transform: rotate(0); opacity: 1 } }@ keyframes spinRight { 0 % { transform - origin: center center; transform: rotate(380 deg); 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(-10 px) } 20 % , 40 % , 60 % , 80 % { -webkit - transform: translateX(10 px) } }@ - moz - keyframes shake { 0 % , 100 % { -moz - transform: translateX(0) } 10 % , 30 % , 50 % , 70 % , 90 % { -moz - transform: translateX(-10 px) } 20 % , 40 % , 60 % , 80 % { -moz - transform: translateX(10 px) } }@ - ms - keyframes shake { 0 % , 100 % { -ms - transform: translateX(0) } 10 % , 30 % , 50 % , 70 % , 90 % { -ms - transform: translateX(-10 px) } 20 % , 40 % , 60 % , 80 % { -ms - transform: translateX(10 px) } }@ - o - keyframes shake { 0 % , 100 % { -o - transform: translateX(0) } 10 % , 30 % , 50 % , 70 % , 90 % { -o - transform: translateX(-10 px) } 20 % , 40 % , 60 % , 80 % { -o - transform: translateX(10 px) } }@ keyframes shake { 0 % , 100 % { transform: translateX(0) } 10 % , 30 % , 50 % , 70 % , 90 % { transform: translateX(-10 px) } 20 % , 40 % , 60 % , 80 % { transform: translateX(10 px) } }.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(-30 px) } 60 % { -webkit - transform: translateY(-15 px) } }@ - moz - keyframes bounce { 0 % , 100 % , 20 % , 50 % , 80 % { -moz - transform: translateY(0) } 40 % { -moz - transform: translateY(-30 px) } 60 % { -moz - transform: translateY(-15 px) } }@ - ms - keyframes bounce { 0 % , 100 % , 20 % , 50 % , 80 % { -ms - transform: translateY(0) } 40 % { -ms - transform: translateY(-30 px) } 60 % { -ms - transform: translateY(-15 px) } }@ - o - keyframes bounce { 0 % , 100 % , 20 % , 50 % , 80 % { -o - transform: translateY(0) } 40 % { -o - transform: translateY(-30 px) } 60 % { -o - transform: translateY(-15 px) } }@ keyframes bounce { 0 % , 100 % , 20 % , 50 % , 80 % { transform: translateY(0) } 40 % { transform: translateY(-30 px) } 60 % { transform: translateY(-15 px) } }.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(-3 deg) } 30 % , 50 % , 70 % , 90 % { -webkit - transform: scale(1.1) rotate(3 deg) } 40 % , 60 % , 80 % { -webkit - transform: scale(1.1) rotate(-3 deg) } }@ - moz - keyframes tada { 0 % , 100 % { -moz - transform: scale(1) rotate(0) } 10 % , 20 % { -moz - transform: scale(0.9) rotate(-3 deg) } 30 % , 50 % , 70 % , 90 % { -moz - transform: scale(1.1) rotate(3 deg) } 40 % , 60 % , 80 % { -moz - transform: scale(1.1) rotate(-3 deg) } }@ - ms - keyframes tada { 0 % , 100 % { -ms - transform: scale(1) rotate(0) } 10 % , 20 % { -ms - transform: scale(0.9) rotate(-3 deg) } 30 % , 50 % , 70 % , 90 % { -ms - transform: scale(1.1) rotate(3 deg) } 40 % , 60 % , 80 % { -ms - transform: scale(1.1) rotate(-3 deg) } }@ - o - keyframes tada { 0 % , 100 % { -o - transform: scale(1) rotate(0) } 10 % , 20 % { -o - transform: scale(0.9) rotate(-3 deg) } 30 % , 50 % , 70 % , 90 % { -o - transform: scale(1.1) rotate(3 deg) } 40 % , 60 % , 80 % { -o - transform: scale(1.1) rotate(-3 deg) } }@ keyframes tada { 0 % , 100 % { transform: scale(1) rotate(0) } 10 % , 20 % { transform: scale(0.9) rotate(-3 deg) } 30 % , 50 % , 70 % , 90 % { transform: scale(1.1) rotate(3 deg) } 40 % , 60 % , 80 % { transform: scale(1.1) rotate(-3 deg) } }.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(15 deg) } 40 % { -webkit - transform: rotate(-10 deg) } 60 % { -webkit - transform: rotate(5 deg) } 80 % { -webkit - transform: rotate(-5 deg) } 100 % { -webkit - transform: rotate(0 deg) } }@ - moz - keyframes wave { 20 % { -moz - transform: rotate(15 deg) } 40 % { -moz - transform: rotate(-10 deg) } 60 % { -moz - transform: rotate(5 deg) } 80 % { -moz - transform: rotate(-5 deg) } 100 % { -moz - transform: rotate(0 deg) } }@ - ms - keyframes wave { 20 % { -ms - transform: rotate(15 deg) } 40 % { -ms - transform: rotate(-10 deg) } 60 % { -ms - transform: rotate(5 deg) } 80 % { -ms - transform: rotate(-5 deg) } 100 % { -ms - transform: rotate(0 deg) } }@ - o - keyframes wave { 20 % { -o - transform: rotate(15 deg) } 40 % { -o - transform: rotate(-10 deg) } 60 % { -o - transform: rotate(5 deg) } 80 % { -o - transform: rotate(-5 deg) } 100 % { -o - transform: rotate(0 deg) } }@ keyframes wave { 20 % { transform: rotate(15 deg) } 40 % { transform: rotate(-10 deg) } 60 % { transform: rotate(5 deg) } 80 % { transform: rotate(-5 deg) } 100 % { transform: rotate(0 deg) } }.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(0 deg) } 100 % { -webkit - transform: rotate(360 deg) } }@ - moz - keyframes spin { 0 % { -moz - transform: rotate(0 deg) } 100 % { -moz - transform: rotate(360 deg) } }@ - ms - keyframes spin { 0 % { -ms - transform: rotate(0 deg) } 100 % { -ms - transform: rotate(360 deg) } }@ - o - keyframes spin { 0 % { -o - transform: rotate(0 deg) } 100 % { -o - transform: rotate(360 deg) } }@ keyframes spin { 0 % { transform: rotate(0 deg) } 100 % { transform: rotate(360 deg) } }.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(0 deg) } 20 % , 30 % { -webkit - transform: rotate(-45 deg) } 100 % { -webkit - transform: rotate(360 deg) } }@ - moz - keyframes pullback { 0 % { -moz - transform: rotate(0 deg) } 20 % , 30 % { -moz - transform: rotate(-45 deg) } 100 % { -moz - transform: rotate(360 deg) } }@ - ms - keyframes pullback { 0 % { -ms - transform: rotate(0 deg) } 20 % , 30 % { -ms - transform: rotate(-45 deg) } 100 % { -ms - transform: rotate(360 deg) } }@ - o - keyframes pullback { 0 % { -o - transform: rotate(0 deg) } 20 % , 30 % { -o - transform: rotate(-45 deg) } 100 % { -o - transform: rotate(360 deg) } }@ keyframes pullback { 0 % { transform: rotate(0 deg) } 20 % , 30 % { transform: rotate(-45 deg) } 100 % { transform: rotate(360 deg) } }.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(0 px) } 15 % { -webkit - transform: translateX(-25 px) rotate(-5 deg) } 30 % { -webkit - transform: translateX(20 px) rotate(3 deg) } 45 % { -webkit - transform: translateX(-15 px) rotate(-3 deg) } 60 % { -webkit - transform: translateX(10 px) rotate(2 deg) } 75 % { -webkit - transform: translateX(-5 px) rotate(-1 deg) } 100 % { -webkit - transform: translateX(0 px) } }@ - moz - keyframes wobble { 0 % { -moz - transform: translateX(0 px) } 15 % { -moz - transform: translateX(-25 px) rotate(-5 deg) } 30 % { -moz - transform: translateX(20 px) rotate(3 deg) } 45 % { -moz - transform: translateX(-15 px) rotate(-3 deg) } 60 % { -moz - transform: translateX(10 px) rotate(2 deg) } 75 % { -moz - transform: translateX(-5 px) rotate(-1 deg) } 100 % { -moz - transform: translateX(0 px) } }@ - ms - keyframes wobble { 0 % { -ms - transform: translateX(0 px) } 15 % { -ms - transform: translateX(-25 px) rotate(-5 deg) } 30 % { -ms - transform: translateX(20 px) rotate(3 deg) } 45 % { -ms - transform: translateX(-15 px) rotate(-3 deg) } 60 % { -ms - transform: translateX(10 px) rotate(2 deg) } 75 % { -ms - transform: translateX(-5 px) rotate(-1 deg) } 100 % { -ms - transform: translateX(0 px) } }@ - o - keyframes wobble { 0 % { -o - transform: translateX(0 px) } 15 % { -o - transform: translateX(-25 px) rotate(-5 deg) } 30 % { -o - transform: translateX(20 px) rotate(3 deg) } 45 % { -o - transform: translateX(-15 px) rotate(-3 deg) } 60 % { -o - transform: translateX(10 px) rotate(2 deg) } 75 % { -o - transform: translateX(-5 px) rotate(-1 deg) } 100 % { -o - transform: translateX(0 px) } }@ keyframes wobble { 0 % { transform: translateX(0 px) } 15 % { transform: translateX(-25 px) rotate(-5 deg) } 30 % { transform: translateX(20 px) rotate(3 deg) } 45 % { transform: translateX(-15 px) rotate(-3 deg) } 60 % { transform: translateX(10 px) rotate(2 deg) } 75 % { transform: translateX(-5 px) rotate(-1 deg) } 100 % { transform: translateX(0 px) } }.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(-3 deg) } 20 % , 40 % { -webkit - transform: scale(1) rotate(-3 deg) } 30 % { -webkit - transform: scale(1.1) rotate(3 deg) } 50 % , 70 % , 90 % { -webkit - transform: scale(1) rotate(3 deg) } 80 % { -webkit - transform: scale(1.1) rotate(-3 deg) } }@ - moz - keyframes panic { 0 % , 100 % { -moz - transform: scale(1) rotate(0) } 10 % , 60 % { -moz - transform: scale(1.1) rotate(-3 deg) } 20 % , 40 % { -moz - transform: scale(1) rotate(-3 deg) } 30 % { -moz - transform: scale(1.1) rotate(3 deg) } 50 % , 70 % , 90 % { -moz - transform: scale(1) rotate(3 deg) } 80 % { -moz - transform: scale(1.1) rotate(-3 deg) } }@ - ms - keyframes panic { 0 % , 100 % { -ms - transform: scale(1) rotate(0) } 10 % , 60 % { -ms - transform: scale(1.1) rotate(-3 deg) } 20 % , 40 % { -ms - transform: scale(1) rotate(-3 deg) } 30 % { -ms - transform: scale(1.1) rotate(3 deg) } 50 % , 70 % , 90 % { -ms - transform: scale(1) rotate(3 deg) } 80 % { -ms - transform: scale(1.1) rotate(-3 deg) } }@ - o - keyframes panic { 0 % , 100 % { -o - transform: scale(1) rotate(0) } 10 % , 60 % { -o - transform: scale(1.1) rotate(-3 deg) } 20 % , 40 % { -o - transform: scale(1) rotate(-3 deg) } 30 % { -o - transform: scale(1.1) rotate(3 deg) } 50 % , 70 % , 90 % { -o - transform: scale(1) rotate(3 deg) } 80 % { -o - transform: scale(1.1) rotate(-3 deg) } }@ keyframes panic { 0 % , 100 % { transform: scale(1) rotate(0) } 10 % , 60 % { transform: scale(1.1) rotate(-3 deg) } 20 % , 40 % { transform: scale(1) rotate(-3 deg) } 30 % { transform: scale(1.1) rotate(3 deg) } 50 % , 70 % , 90 % { transform: scale(1) rotate(3 deg) } 80 % { transform: scale(1.1) rotate(-3 deg) } }.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(-3 deg) } 60 % { -webkit - transform: scale(.3) rotate(-5 deg) } 30 % { -webkit - transform: scale(.4) rotate(8 deg) } 40 % { -webkit - transform: scale(.3) rotate(-11 deg) } 50 % { -webkit - transform: scale(.4) rotate(14 deg) } 70 % { -webkit - transform: scale(.2) rotate(17 deg) } 80 % { opacity: 1; - webkit - transform: scale(.2) rotate(-20 deg) } 100 % { opacity: 0; - webkit - transform: scale(10) rotate(360 deg) } }@ - moz - keyframes explode { 0 % { opacity: 1; - moz - transform: scale(1) } 20 % { -moz - transform: scale(.3) rotate(-3 deg) } 60 % { -moz - transform: scale(.3) rotate(-5 deg) } 30 % { -moz - transform: scale(.4) rotate(8 deg) } 40 % { -moz - transform: scale(.3) rotate(-11 deg) } 50 % { -moz - transform: scale(.4) rotate(14 deg) } 70 % { -moz - transform: scale(.2) rotate(17 deg) } 80 % { opacity: 1; - moz - transform: scale(.2) rotate(-20 deg) } 100 % { opacity: 0; - moz - transform: scale(10) rotate(360 deg) } }@ - ms - keyframes explode { 0 % { opacity: 1; - ms - transform: scale(1) } 20 % { -ms - transform: scale(.3) rotate(-3 deg) } 60 % { -ms - transform: scale(.3) rotate(-5 deg) } 30 % { -ms - transform: scale(.4) rotate(8 deg) } 40 % { -ms - transform: scale(.3) rotate(-11 deg) } 50 % { -ms - transform: scale(.4) rotate(14 deg) } 70 % { -ms - transform: scale(.2) rotate(17 deg) } 80 % { opacity: 1; - ms - transform: scale(.2) rotate(-20 deg) } 100 % { opacity: 0; - ms - transform: scale(10) rotate(360 deg) } }@ - o - keyframes explode { 0 % { opacity: 1; - o - transform: scale(1) } 20 % { -o - transform: scale(.3) rotate(-3 deg) } 60 % { -o - transform: scale(.3) rotate(-5 deg) } 30 % { -o - transform: scale(.4) rotate(8 deg) } 40 % { -o - transform: scale(.3) rotate(-11 deg) } 50 % { -o - transform: scale(.4) rotate(14 deg) } 70 % { -o - transform: scale(.2) rotate(17 deg) } 80 % { opacity: 1; - o - transform: scale(.2) rotate(-20 deg) } 100 % { opacity: 0; - o - transform: scale(10) rotate(360 deg) } }@ keyframes explode { 0 % { opacity: 1;transform: scale(1) } 20 % { transform: scale(.3) rotate(-3 deg) } 60 % { transform: scale(.3) rotate(-5 deg) } 30 % { transform: scale(.4) rotate(8 deg) } 40 % { transform: scale(.3) rotate(-11 deg) } 50 % { transform: scale(.4) rotate(14 deg) } 70 % { transform: scale(.2) rotate(17 deg) } 80 % { opacity: 1;transform: scale(.2) rotate(-20 deg) } 100 % { opacity: 0;transform: scale(10) rotate(360 deg) } }.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: 1 s; - moz - animation - duration: 1 s; - ms - animation - duration: 1 s; - o - animation - duration: 1 s;animation - duration: 1 s; - 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(200 px) } 100 % { opacity: 1; - webkit - transform: translateY(0) } }@ - moz - keyframes fadeInUp { 0 % { opacity: 0; - moz - transform: translateY(200 px) } 100 % { opacity: 1; - moz - transform: translateY(0) } }@ - ms - keyframes fadeInUp { 0 % { opacity: 0; - ms - transform: translateY(200 px) } 100 % { opacity: 1; - ms - transform: translateY(0) } }@ - o - keyframes fadeInUp { 0 % { opacity: 0; - o - transform: translateY(200 px) } 100 % { opacity: 1; - o - transform: translateY(0) } }@ keyframes fadeInUp { 0 % { opacity: 0;transform: translateY(200 px) } 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(-200 px) } 100 % { opacity: 1; - webkit - transform: translateY(0) } }@ - moz - keyframes fadeInDown { 0 % { opacity: 0; - moz - transform: translateY(-200 px) } 100 % { opacity: 1; - moz - transform: translateY(0) } }@ - ms - keyframes fadeInDown { 0 % { opacity: 0; - ms - transform: translateY(-200 px) } 100 % { opacity: 1; - ms - transform: translateY(0) } }@ - o - keyframes fadeInDown { 0 % { opacity: 0; - o - transform: translateY(-200 px) } 100 % { opacity: 1; - o - transform: translateY(0) } }@ keyframes fadeInDown { 0 % { opacity: 0;transform: translateY(-200 px) } 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(-200 px) } 100 % { opacity: 1; - webkit - transform: translateX(0) } }@ - moz - keyframes fadeInLeft { 0 % { opacity: 0; - moz - transform: translateX(-200 px) } 100 % { opacity: 1; - moz - transform: translateX(0) } }@ - ms - keyframes fadeInLeft { 0 % { opacity: 0; - ms - transform: translateX(-200 px) } 100 % { opacity: 1; - ms - transform: translateX(0) } }@ - o - keyframes fadeInLeft { 0 % { opacity: 0; - o - transform: translateX(-200 px) } 100 % { opacity: 1; - o - transform: translateX(0) } }@ keyframes fadeInLeft { 0 % { opacity: 0;transform: translateX(-200 px) } 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(200 px) } 100 % { opacity: 1; - webkit - transform: translateX(0) } }@ - moz - keyframes fadeInRight { 0 % { opacity: 0; - moz - transform: translateX(200 px) } 100 % { opacity: 1; - moz - transform: translateX(0) } }@ - ms - keyframes fadeInRight { 0 % { opacity: 0; - ms - transform: translateX(200 px) } 100 % { opacity: 1; - ms - transform: translateX(0) } }@ - o - keyframes fadeInRight { 0 % { opacity: 0; - o - transform: translateX(200 px) } 100 % { opacity: 1; - o - transform: translateX(0) } }@ keyframes fadeInRight { 0 % { opacity: 0;transform: translateX(200 px) } 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(1000 px) } 100 % { opacity: 1; - webkit - transform: translateY(0) } }@ - moz - keyframes fadeInUpLarge { 0 % { opacity: 0; - moz - transform: translateY(1000 px) } 100 % { opacity: 1; - moz - transform: translateY(0) } }@ - ms - keyframes fadeInUpLarge { 0 % { opacity: 0; - ms - transform: translateY(1000 px) } 100 % { opacity: 1; - ms - transform: translateY(0) } }@ - o - keyframes fadeInUpLarge { 0 % { opacity: 0; - o - transform: translateY(1000 px) } 100 % { opacity: 1; - o - transform: translateY(0) } }@ keyframes fadeInUpLarge { 0 % { opacity: 0;transform: translateY(1000 px) } 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(-1000 px) } 100 % { opacity: 1; - webkit - transform: translateY(0) } }@ - moz - keyframes fadeInDownLarge { 0 % { opacity: 0; - moz - transform: translateY(-1000 px) } 100 % { opacity: 1; - moz - transform: translateY(0) } }@ - ms - keyframes fadeInDownLarge { 0 % { opacity: 0; - ms - transform: translateY(-1000 px) } 100 % { opacity: 1; - ms - transform: translateY(0) } }@ - o - keyframes fadeInDownLarge { 0 % { opacity: 0; - o - transform: translateY(-1000 px) } 100 % { opacity: 1; - o - transform: translateY(0) } }@ keyframes fadeInDownLarge { 0 % { opacity: 0;transform: translateY(-1000 px) } 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(-1000 px) } 100 % { opacity: 1; - webkit - transform: translateX(0) } }@ - moz - keyframes fadeInLeftLarge { 0 % { opacity: 0; - moz - transform: translateX(-1000 px) } 100 % { opacity: 1; - moz - transform: translateX(0) } }@ - ms - keyframes fadeInLeftLarge { 0 % { opacity: 0; - ms - transform: translateX(-1000 px) } 100 % { opacity: 1; - ms - transform: translateX(0) } }@ - o - keyframes fadeInLeftLarge { 0 % { opacity: 0; - o - transform: translateX(-1000 px) } 100 % { opacity: 1; - o - transform: translateX(0) } }@ keyframes fadeInLeftLarge { 0 % { opacity: 0;transform: translateX(-1000 px) } 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(1000 px) } 100 % { opacity: 1; - webkit - transform: translateX(0) } }@ - moz - keyframes fadeInRightLarge { 0 % { opacity: 0; - moz - transform: translateX(1000 px) } 100 % { opacity: 1; - moz - transform: translateX(0) } }@ - ms - keyframes fadeInRightLarge { 0 % { opacity: 0; - ms - transform: translateX(1000 px) } 100 % { opacity: 1; - ms - transform: translateX(0) } }@ - o - keyframes fadeInRightLarge { 0 % { opacity: 0; - o - transform: translateX(1000 px) } 100 % { opacity: 1; - o - transform: translateX(0) } }@ keyframes fadeInRightLarge { 0 % { opacity: 0;transform: translateX(1000 px) } 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(-200 px) } }@ - moz - keyframes fadeOutUp { 0 % { opacity: 1; - moz - transform: translateY(0) } 100 % { opacity: 0; - moz - transform: translateY(-200 px) } }@ - ms - keyframes fadeOutUp { 0 % { opacity: 1; - ms - transform: translateY(0) } 100 % { opacity: 0; - ms - transform: translateY(-200 px) } }@ - o - keyframes fadeOutUp { 0 % { opacity: 1; - o - transform: translateY(0) } 100 % { opacity: 0; - o - transform: translateY(-200 px) } }@ keyframes fadeOutUp { 0 % { opacity: 1;transform: translateY(0) } 100 % { opacity: 0;transform: translateY(-200 px) } }.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(200 px) } }@ - moz - keyframes fadeOutDown { 0 % { opacity: 1; - moz - transform: translateY(0) } 100 % { opacity: 0; - moz - transform: translateY(200 px) } }@ - ms - keyframes fadeOutDown { 0 % { opacity: 1; - ms - transform: translateY(0) } 100 % { opacity: 0; - ms - transform: translateY(200 px) } }@ - o - keyframes fadeOutDown { 0 % { opacity: 1; - o - transform: translateY(0) } 100 % { opacity: 0; - o - transform: translateY(200 px) } }@ keyframes fadeOutDown { 0 % { opacity: 1;transform: translateY(0) } 100 % { opacity: 0;transform: translateY(200 px) } }.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(-200 px) } }@ - moz - keyframes fadeOutLeft { 0 % { opacity: 0; - moz - transform: translateX(0) } 100 % { opacity: 1; - moz - transform: translateX(-200 px) } }@ - ms - keyframes fadeOutLeft { 0 % { opacity: 0; - ms - transform: translateX(0) } 100 % { opacity: 1; - ms - transform: translateX(-200 px) } }@ - o - keyframes fadeOutLeft { 0 % { opacity: 0; - o - transform: translateX(0) } 100 % { opacity: 1; - o - transform: translateX(-200 px) } }@ keyframes fadeOutLeft { 0 % { opacity: 0;transform: translateX(0) } 100 % { opacity: 1;transform: translateX(-200 px) } }.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(200 px) } }@ - moz - keyframes fadeOutRight { 0 % { opacity: 0; - moz - transform: translateX(0) } 100 % { opacity: 1; - moz - transform: translateX(200 px) } }@ - ms - keyframes fadeOutRight { 0 % { opacity: 0; - ms - transform: translateX(0) } 100 % { opacity: 1; - ms - transform: translateX(200 px) } }@ - o - keyframes fadeOutRight { 0 % { opacity: 0; - o - transform: translateX(0) } 100 % { opacity: 1; - o - transform: translateX(200 px) } }@ keyframes fadeOutRight { 0 % { opacity: 0;transform: translateX(0) } 100 % { opacity: 1;transform: translateX(200 px) } }.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(-1000 px) } }@ - moz - keyframes fadeOutUpLarge { 0 % { opacity: 1; - moz - transform: translateY(0) } 100 % { opacity: 0; - moz - transform: translateY(-1000 px) } }@ - ms - keyframes fadeOutUpLarge { 0 % { opacity: 1; - ms - transform: translateY(0) } 100 % { opacity: 0; - ms - transform: translateY(-1000 px) } }@ - o - keyframes fadeOutUpLarge { 0 % { opacity: 1; - o - transform: translateY(0) } 100 % { opacity: 0; - o - transform: translateY(-1000 px) } }@ keyframes fadeOutUpLarge { 0 % { opacity: 1;transform: translateY(0) } 100 % { opacity: 0;transform: translateY(-1000 px) } }.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(1000 px) } }@ - moz - keyframes fadeOutDownLarge { 0 % { opacity: 1; - moz - transform: translateY(0) } 100 % { opacity: 0; - moz - transform: translateY(1000 px) } }@ - ms - keyframes fadeOutDownLarge { 0 % { opacity: 1; - ms - transform: translateY(0) } 100 % { opacity: 0; - ms - transform: translateY(1000 px) } }@ - o - keyframes fadeOutDownLarge { 0 % { opacity: 1; - o - transform: translateY(0) } 100 % { opacity: 0; - o - transform: translateY(1000 px) } }@ keyframes fadeOutDownLarge { 0 % { opacity: 1;transform: translateY(0) } 100 % { opacity: 0;transform: translateY(1000 px) } }.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(-1000 px) } }@ - moz - keyframes fadeOutLeftLarge { 0 % { opacity: 0; - moz - transform: translateX(0) } 100 % { opacity: 1; - moz - transform: translateX(-1000 px) } }@ - ms - keyframes fadeOutLeftLarge { 0 % { opacity: 0; - ms - transform: translateX(0) } 100 % { opacity: 1; - ms - transform: translateX(-1000 px) } }@ - o - keyframes fadeOutLeftLarge { 0 % { opacity: 0; - o - transform: translateX(0) } 100 % { opacity: 1; - o - transform: translateX(-1000 px) } }@ keyframes fadeOutLeftLarge { 0 % { opacity: 0;transform: translateX(0) } 100 % { opacity: 1;transform: translateX(-1000 px) } }.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(1000 px) } }@ - moz - keyframes fadeOutRightLarge { 0 % { opacity: 0; - moz - transform: translateX(0) } 100 % { opacity: 1; - moz - transform: translateX(1000 px) } }@ - ms - keyframes fadeOutRightLarge { 0 % { opacity: 0; - ms - transform: translateX(0) } 100 % { opacity: 1; - ms - transform: translateX(1000 px) } }@ - o - keyframes fadeOutRightLarge { 0 % { opacity: 0; - o - transform: translateX(0) } 100 % { opacity: 1; - o - transform: translateX(1000 px) } }@ keyframes fadeOutRightLarge { 0 % { opacity: 0;transform: translateX(0) } 100 % { opacity: 1;transform: translateX(1000 px) } }.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(200 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateY(0) } }@ - moz - keyframes zoomInUp { 0 % { opacity: 0; - moz - transform: scale(0) translateY(200 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateY(0) } }@ - ms - keyframes zoomInUp { 0 % { opacity: 0; - ms - transform: scale(0) translateY(200 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateY(0) } }@ - o - keyframes zoomInUp { 0 % { opacity: 0; - o - transform: scale(0) translateY(200 px) } 100 % { opacity: 1; - o - transform: scale(1) translateY(0) } }@ keyframes zoomInUp { 0 % { opacity: 0;transform: scale(0) translateY(200 px) } 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(-200 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateY(0) } }@ - moz - keyframes zoomInDown { 0 % { opacity: 0; - moz - transform: scale(0) translateY(-200 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateY(0) } }@ - ms - keyframes zoomInDown { 0 % { opacity: 0; - ms - transform: scale(0) translateY(-200 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateY(0) } }@ - o - keyframes zoomInDown { 0 % { opacity: 0; - o - transform: scale(0) translateY(-200 px) } 100 % { opacity: 1; - o - transform: scale(1) translateY(0) } }@ keyframes zoomInDown { 0 % { opacity: 0;transform: scale(0) translateY(-200 px) } 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(-200 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateX(0) } }@ - moz - keyframes zoomInLeft { 0 % { opacity: 0; - moz - transform: scale(0) translateX(-200 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(0) } }@ - ms - keyframes zoomInLeft { 0 % { opacity: 0; - ms - transform: scale(0) translateX(-200 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(0) } }@ - o - keyframes zoomInLeft { 0 % { opacity: 0; - o - transform: scale(0) translateX(-200 px) } 100 % { opacity: 1; - o - transform: scale(1) translateX(0) } }@ keyframes zoomInLeft { 0 % { opacity: 0;transform: scale(0) translateX(-200 px) } 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(200 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateX(0) } }@ - moz - keyframes zoomInRight { 0 % { opacity: 0; - moz - transform: scale(0) translateX(200 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(0) } }@ - ms - keyframes zoomInRight { 0 % { opacity: 0; - ms - transform: scale(0) translateX(200 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(0) } }@ - o - keyframes zoomInRight { 0 % { opacity: 0; - o - transform: scale(0) translateX(200 px) } 100 % { opacity: 1; - o - transform: scale(1) translateX(0) } }@ keyframes zoomInRight { 0 % { opacity: 0;transform: scale(0) translateX(200 px) } 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(1000 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateY(0) } }@ - moz - keyframes zoomInUpLarge { 0 % { opacity: 0; - moz - transform: scale(0) translateY(1000 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateY(0) } }@ - ms - keyframes zoomInUpLarge { 0 % { opacity: 0; - ms - transform: scale(0) translateY(1000 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateY(0) } }@ - o - keyframes zoomInUpLarge { 0 % { opacity: 0; - o - transform: scale(0) translateY(1000 px) } 100 % { opacity: 1; - o - transform: scale(1) translateY(0) } }@ keyframes zoomInUpLarge { 0 % { opacity: 0;transform: scale(0) translateY(1000 px) } 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(-1000 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateY(0) } }@ - moz - keyframes zoomInDownLarge { 0 % { opacity: 0; - moz - transform: scale(0) translateY(-1000 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateY(0) } }@ - ms - keyframes zoomInDownLarge { 0 % { opacity: 0; - ms - transform: scale(0) translateY(-1000 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateY(0) } }@ - o - keyframes zoomInDownLarge { 0 % { opacity: 0; - o - transform: scale(0) translateY(-1000 px) } 100 % { opacity: 1; - o - transform: scale(1) translateY(0) } }@ keyframes zoomInDownLarge { 0 % { opacity: 0;transform: scale(0) translateY(-1000 px) } 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(-1000 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateX(0) } }@ - moz - keyframes zoomInLeftLarge { 0 % { opacity: 0; - moz - transform: scale(0) translateX(-1000 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(0) } }@ - ms - keyframes zoomInLeftLarge { 0 % { opacity: 0; - ms - transform: scale(0) translateX(-1000 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(0) } }@ - o - keyframes zoomInLeftLarge { 0 % { opacity: 0; - o - transform: scale(0) translateX(-1000 px) } 100 % { opacity: 1; - o - transform: scale(1) translateX(0) } }@ keyframes zoomInLeftLarge { 0 % { opacity: 0;transform: scale(0) translateX(-1000 px) } 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(1000 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateX(0) } }@ - moz - keyframes zoomInRightLarge { 0 % { opacity: 0; - moz - transform: scale(0) translateX(1000 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(0) } }@ - ms - keyframes zoomInRightLarge { 0 % { opacity: 0; - ms - transform: scale(0) translateX(1000 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(0) } }@ - o - keyframes zoomInRightLarge { 0 % { opacity: 0; - o - transform: scale(0) translateX(1000 px) } 100 % { opacity: 1; - o - transform: scale(1) translateX(0) } }@ keyframes zoomInRightLarge { 0 % { opacity: 0;transform: scale(0) translateX(1000 px) } 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(-200 px) } }@ - moz - keyframes zoomOutUp { 0 % { opacity: 1; - moz - transform: scale(1) translateY(0) } 100 % { opacity: 0; - moz - transform: scale(0) translateY(-200 px) } }@ - ms - keyframes zoomOutUp { 0 % { opacity: 1; - ms - transform: scale(1) translateY(0) } 100 % { opacity: 0; - ms - transform: scale(0) translateY(-200 px) } }@ - o - keyframes zoomOutUp { 0 % { opacity: 1; - o - transform: scale(1) translateY(0) } 100 % { opacity: 0; - o - transform: scale(0) translateY(-200 px) } }@ keyframes zoomOutUp { 0 % { opacity: 1;transform: scale(1) translateY(0) } 100 % { opacity: 0;transform: scale(0) translateY(-200 px) } }.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(200 px) } }@ - moz - keyframes zoomOutDown { 0 % { opacity: 1; - moz - transform: scale(1) translateY(0) } 100 % { opacity: 0; - moz - transform: scale(0) translateY(200 px) } }@ - ms - keyframes zoomOutDown { 0 % { opacity: 1; - ms - transform: scale(1) translateY(0) } 100 % { opacity: 0; - ms - transform: scale(0) translateY(200 px) } }@ - o - keyframes zoomOutDown { 0 % { opacity: 1; - o - transform: scale(1) translateY(0) } 100 % { opacity: 0; - o - transform: scale(0) translateY(200 px) } }@ keyframes zoomOutDown { 0 % { opacity: 1;transform: scale(1) translateY(0) } 100 % { opacity: 0;transform: scale(0) translateY(200 px) } }.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(-200 px) } }@ - moz - keyframes zoomOutLeft { 0 % { opacity: 0; - moz - transform: scale(0) translateX(0) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(-200 px) } }@ - ms - keyframes zoomOutLeft { 0 % { opacity: 0; - ms - transform: scale(0) translateX(0) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(-200 px) } }@ - o - keyframes zoomOutLeft { 0 % { opacity: 0; - o - transform: scale(0) translateX(0) } 100 % { opacity: 1; - o - transform: scale(1) translateX(-200 px) } }@ keyframes zoomOutLeft { 0 % { opacity: 0;transform: scale(0) translateX(0) } 100 % { opacity: 1;transform: scale(1) translateX(-200 px) } }.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(200 px) } }@ - moz - keyframes zoomOutRight { 0 % { opacity: 0; - moz - transform: scale(0) translateX(0) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(200 px) } }@ - ms - keyframes zoomOutRight { 0 % { opacity: 0; - ms - transform: scale(0) translateX(0) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(200 px) } }@ - o - keyframes zoomOutRight { 0 % { opacity: 0; - o - transform: scale(0) translateX(0) } 100 % { opacity: 1; - o - transform: scale(1) translateX(200 px) } }@ keyframes zoomOutRight { 0 % { opacity: 0;transform: scale(0) translateX(0) } 100 % { opacity: 1;transform: scale(1) translateX(200 px) } }.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(-1000 px) } }@ - moz - keyframes zoomOutUpLarge { 0 % { opacity: 1; - moz - transform: scale(1) translateY(0) } 100 % { opacity: 0; - moz - transform: scale(0) translateY(-1000 px) } }@ - ms - keyframes zoomOutUpLarge { 0 % { opacity: 1; - ms - transform: scale(1) translateY(0) } 100 % { opacity: 0; - ms - transform: scale(0) translateY(-1000 px) } }@ - o - keyframes zoomOutUpLarge { 0 % { opacity: 1; - o - transform: scale(1) translateY(0) } 100 % { opacity: 0; - o - transform: scale(0) translateY(-1000 px) } }@ keyframes zoomOutUpLarge { 0 % { opacity: 1;transform: scale(1) translateY(0) } 100 % { opacity: 0;transform: scale(0) translateY(-1000 px) } }.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(1000 px) } }@ - moz - keyframes zoomOutDownLarge { 0 % { opacity: 1; - moz - transform: scale(1) translateY(0) } 100 % { opacity: 0; - moz - transform: scale(0) translateY(1000 px) } }@ - ms - keyframes zoomOutDownLarge { 0 % { opacity: 1; - ms - transform: scale(1) translateY(0) } 100 % { opacity: 0; - ms - transform: scale(0) translateY(1000 px) } }@ - o - keyframes zoomOutDownLarge { 0 % { opacity: 1; - o - transform: scale(1) translateY(0) } 100 % { opacity: 0; - o - transform: scale(0) translateY(1000 px) } }@ keyframes zoomOutDownLarge { 0 % { opacity: 1;transform: scale(1) translateY(0) } 100 % { opacity: 0;transform: scale(0) translateY(1000 px) } }.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(-1000 px) } }@ - moz - keyframes zoomOutLeftLarge { 0 % { opacity: 0; - moz - transform: scale(0) translateX(0) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(-1000 px) } }@ - ms - keyframes zoomOutLeftLarge { 0 % { opacity: 0; - ms - transform: scale(0) translateX(0) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(-1000 px) } }@ - o - keyframes zoomOutLeftLarge { 0 % { opacity: 0; - o - transform: scale(0) translateX(0) } 100 % { opacity: 1; - o - transform: scale(1) translateX(-1000 px) } }@ keyframes zoomOutLeftLarge { 0 % { opacity: 0;transform: scale(0) translateX(0) } 100 % { opacity: 1;transform: scale(1) translateX(-1000 px) } }.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(1000 px) } }@ - moz - keyframes zoomOutRightLarge { 0 % { opacity: 0; - moz - transform: scale(0) translateX(0) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(1000 px) } }@ - ms - keyframes zoomOutRightLarge { 0 % { opacity: 0; - ms - transform: scale(0) translateX(0) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(1000 px) } }@ - o - keyframes zoomOutRightLarge { 0 % { opacity: 0; - o - transform: scale(0) translateX(0) } 100 % { opacity: 1; - o - transform: scale(1) translateX(1000 px) } }@ keyframes zoomOutRightLarge { 0 % { opacity: 0;transform: scale(0) translateX(0) } 100 % { opacity: 1;transform: scale(1) translateX(1000 px) } }.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(200 px) } 60 % { opacity: 1; - webkit - transform: scale(1.1) translateY(-40 px) } 80 % { opacity: 1; - webkit - transform: scale(.9) translateY(20 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateY(0) } }@ - moz - keyframes bounceInUp { 0 % { opacity: 0; - moz - transform: scale(0) translateY(200 px) } 60 % { opacity: 1; - moz - transform: scale(1.1) translateY(-40 px) } 80 % { opacity: 1; - moz - transform: scale(.9) translateY(20 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateY(0) } }@ - ms - keyframes bounceInUp { 0 % { opacity: 0; - ms - transform: scale(0) translateY(200 px) } 60 % { opacity: 1; - ms - transform: scale(1.1) translateY(-40 px) } 80 % { opacity: 1; - ms - transform: scale(.9) translateY(20 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateY(0) } }@ - o - keyframes bounceInUp { 0 % { opacity: 0; - o - transform: scale(0) translateY(200 px) } 60 % { opacity: 1; - o - transform: scale(1.1) translateY(-40 px) } 80 % { opacity: 1; - o - transform: scale(.9) translateY(20 px) } 100 % { opacity: 1; - o - transform: scale(1) translateY(0) } }@ keyframes bounceInUp { 0 % { opacity: 0;transform: scale(0) translateY(200 px) } 60 % { opacity: 1;transform: scale(1.1) translateY(-40 px) } 80 % { opacity: 1;transform: scale(.9) translateY(20 px) } 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(-200 px) } 60 % { opacity: 1; - webkit - transform: scale(1.1) translateY(40 px) } 80 % { opacity: 1; - webkit - transform: scale(.9) translateY(-20 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateY(0) } }@ - moz - keyframes bounceInDown { 0 % { opacity: 0; - moz - transform: scale(0) translateY(-200 px) } 60 % { opacity: 1; - moz - transform: scale(1.1) translateY(40 px) } 80 % { opacity: 1; - moz - transform: scale(.9) translateY(-20 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateY(0) } }@ - ms - keyframes bounceInDown { 0 % { opacity: 0; - ms - transform: scale(0) translateY(-200 px) } 60 % { opacity: 1; - ms - transform: scale(1.1) translateY(40 px) } 80 % { opacity: 1; - ms - transform: scale(.9) translateY(-20 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateY(0) } }@ - o - keyframes bounceInDown { 0 % { opacity: 0; - o - transform: scale(0) translateY(-200 px) } 60 % { opacity: 1; - o - transform: scale(1.1) translateY(40 px) } 80 % { opacity: 1; - o - transform: scale(.9) translateY(-20 px) } 100 % { opacity: 1; - o - transform: scale(1) translateY(0) } }@ keyframes bounceInDown { 0 % { opacity: 0;transform: scale(0) translateY(-200 px) } 60 % { opacity: 1;transform: scale(1.1) translateY(40 px) } 80 % { opacity: 1;transform: scale(.9) translateY(-20 px) } 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(-200 px) } 60 % { opacity: 1; - webkit - transform: scale(1.1) translateX(40 px) } 80 % { opacity: 1; - webkit - transform: scale(.9) translateX(-20 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateX(0) } }@ - moz - keyframes bounceInLeft { 0 % { opacity: 0; - moz - transform: scale(0) translateX(-200 px) } 60 % { opacity: 1; - moz - transform: scale(1.1) translateX(40 px) } 80 % { opacity: 1; - moz - transform: scale(.9) translateX(-20 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(0) } }@ - ms - keyframes bounceInLeft { 0 % { opacity: 0; - ms - transform: scale(0) translateX(-200 px) } 60 % { opacity: 1; - ms - transform: scale(1.1) translateX(40 px) } 80 % { opacity: 1; - ms - transform: scale(.9) translateX(-20 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(0) } }@ - o - keyframes bounceInLeft { 0 % { opacity: 0; - o - transform: scale(0) translateX(-200 px) } 60 % { opacity: 1; - o - transform: scale(1.1) translateX(40 px) } 80 % { opacity: 1; - o - transform: scale(.9) translateX(-20 px) } 100 % { opacity: 1; - o - transform: scale(1) translateX(0) } }@ keyframes bounceInLeft { 0 % { opacity: 0;transform: scale(0) translateX(-200 px) } 60 % { opacity: 1;transform: scale(1.1) translateX(40 px) } 80 % { opacity: 1;transform: scale(.9) translateX(-20 px) } 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(200 px) } 60 % { opacity: 1; - webkit - transform: scale(1.1) translateX(-40 px) } 80 % { opacity: 1; - webkit - transform: scale(.9) translateX(20 px) } 100 % { opacity: 1; - webkit - transform: scale(1) translateX(0) } }@ - moz - keyframes bounceInRight { 0 % { opacity: 0; - moz - transform: scale(0) translateX(200 px) } 60 % { opacity: 1; - moz - transform: scale(1.1) translateX(-40 px) } 80 % { opacity: 1; - moz - transform: scale(.9) translateX(20 px) } 100 % { opacity: 1; - moz - transform: scale(1) translateX(0) } }@ - ms - keyframes bounceInRight { 0 % { opacity: 0; - ms - transform: scale(0) translateX(200 px) } 60 % { opacity: 1; - ms - transform: scale(1.1) translateX(-40 px) } 80 % { opacity: 1; - ms - transform: scale(.9) translateX(20 px) } 100 % { opacity: 1; - ms - transform: scale(1) translateX(0) } }@ - o - keyframes bounceInRight { 0 % { opacity: 0; - o - transform: scale(0) translateX(200 px) } 60 % { opacity: 1; - o - transform: scale(1.1) translateX(-40 px) } 80 % { opacity: 1; - o - transform: scale(.9) translateX(20 px) } 100 % { opacity: 1; - o - transform: scale(1) translateX(0) } }@ keyframes bounceInRight { 0 % { opacity: 0;transform: scale(0) translateX(200 px) } 60 % { opacity: 1;transform: scale(1.1) translateX(-40 px) } 80 % { opacity: 1;transform: scale(.9) translateX(20 px) } 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(40 px) } 100 % { opacity: 0; - webkit - transform: translateY(-200 px) } }@ - moz - keyframes bounceOutUp { 0 % { opacity: 1; - moz - transform: translateY(0) } 20 % { opacity: 1; - moz - transform: translateY(40 px) } 100 % { opacity: 0; - moz - transform: translateY(-200 px) } }@ - ms - keyframes bounceOutUp { 0 % { opacity: 1; - ms - transform: translateY(0) } 20 % { opacity: 1; - ms - transform: translateY(40 px) } 100 % { opacity: 0; - ms - transform: translateY(-200 px) } }@ - o - keyframes bounceOutUp { 0 % { opacity: 1; - o - transform: translateY(0) } 20 % { opacity: 1; - o - transform: translateY(40 px) } 100 % { opacity: 0; - o - transform: translateY(-200 px) } }@ keyframes bounceOutUp { 0 % { opacity: 1;transform: translateY(0) } 20 % { opacity: 1;transform: translateY(40 px) } 100 % { opacity: 0;transform: translateY(-200 px) } }.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(-40 px) } 100 % { opacity: 0; - webkit - transform: translateY(200 px) } }@ - moz - keyframes bounceOutDown { 0 % { opacity: 1; - moz - transform: translateY(0) } 20 % { opacity: 1; - moz - transform: translateY(-40 px) } 100 % { opacity: 0; - moz - transform: translateY(200 px) } }@ - ms - keyframes bounceOutDown { 0 % { opacity: 1; - ms - transform: translateY(0) } 20 % { opacity: 1; - ms - transform: translateY(-40 px) } 100 % { opacity: 0; - ms - transform: translateY(200 px) } }@ - o - keyframes bounceOutDown { 0 % { opacity: 1; - o - transform: translateY(0) } 20 % { opacity: 1; - o - transform: translateY(-40 px) } 100 % { opacity: 0; - o - transform: translateY(200 px) } }@ keyframes bounceOutDown { 0 % { opacity: 1;transform: translateY(0) } 20 % { opacity: 1;transform: translateY(-40 px) } 100 % { opacity: 0;transform: translateY(200 px) } }.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(40 px) } 100 % { opacity: 0; - webkit - transform: translateX(-200 px) } }@ - moz - keyframes bounceOutLeft { 0 % { opacity: 1; - moz - transform: translateX(0) } 20 % { opacity: 1; - moz - transform: translateX(40 px) } 100 % { opacity: 0; - moz - transform: translateX(-200 px) } }@ - ms - keyframes bounceOutLeft { 0 % { opacity: 1; - ms - transform: translateX(0) } 20 % { opacity: 1; - ms - transform: translateX(40 px) } 100 % { opacity: 0; - ms - transform: translateX(-200 px) } }@ - o - keyframes bounceOutLeft { 0 % { opacity: 1; - o - transform: translateX(0) } 20 % { opacity: 1; - o - transform: translateX(40 px) } 100 % { opacity: 0; - o - transform: translateX(-200 px) } }@ keyframes bounceOutLeft { 0 % { opacity: 1;transform: translateX(0) } 20 % { opacity: 1;transform: translateX(40 px) } 100 % { opacity: 0;transform: translateX(-200 px) } }.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(-40 px) } 100 % { opacity: 0; - webkit - transform: translateX(200 px) } }@ - moz - keyframes bounceOutRight { 0 % { opacity: 1; - moz - transform: translateX(0) } 20 % { opacity: 1; - moz - transform: translateX(-40 px) } 100 % { opacity: 0; - moz - transform: translateX(200 px) } }@ - ms - keyframes bounceOutRight { 0 % { opacity: 1; - ms - transform: translateX(0) } 20 % { opacity: 1; - ms - transform: translateX(-40 px) } 100 % { opacity: 0; - ms - transform: translateX(200 px) } }@ - o - keyframes bounceOutRight { 0 % { opacity: 1; - o - transform: translateX(0) } 20 % { opacity: 1; - o - transform: translateX(-40 px) } 100 % { opacity: 0; - o - transform: translateX(200 px) } }@ keyframes bounceOutRight { 0 % { opacity: 1;transform: translateX(0) } 20 % { opacity: 1;transform: translateX(-40 px) } 100 % { opacity: 0;transform: translateX(200 px) } }.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(-380 deg); 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(-380 deg); 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(-380 deg); 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(-380 deg); opacity: 0 } 100 % { -o - transform - origin: center center; - o - transform: rotate(0); opacity: 1 } }@ keyframes spinLeft { 0 % { transform - origin: center center; transform: rotate(-380 deg); 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(380 deg); 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(380 deg); 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(380 deg); 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(380 deg); opacity: 0 } 100 % { -o - transform - origin: center center; - o - transform: rotate(0); opacity: 1 } }@ keyframes spinRight { 0 % { transform - origin: center center; transform: rotate(380 deg); 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(-10 px) } 20 % , 40 % , 60 % , 80 % { -webkit - transform: translateX(10 px) } }@ - moz - keyframes shake { 0 % , 100 % { -moz - transform: translateX(0) } 10 % , 30 % , 50 % , 70 % , 90 % { -moz - transform: translateX(-10 px) } 20 % , 40 % , 60 % , 80 % { -moz - transform: translateX(10 px) } }@ - ms - keyframes shake { 0 % , 100 % { -ms - transform: translateX(0) } 10 % , 30 % , 50 % , 70 % , 90 % { -ms - transform: translateX(-10 px) } 20 % , 40 % , 60 % , 80 % { -ms - transform: translateX(10 px) } }@ - o - keyframes shake { 0 % , 100 % { -o - transform: translateX(0) } 10 % , 30 % , 50 % , 70 % , 90 % { -o - transform: translateX(-10 px) } 20 % , 40 % , 60 % , 80 % { -o - transform: translateX(10 px) } }@ keyframes shake { 0 % , 100 % { transform: translateX(0) } 10 % , 30 % , 50 % , 70 % , 90 % { transform: translateX(-10 px) } 20 % , 40 % , 60 % , 80 % { transform: translateX(10 px) } }.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(-30 px) } 60 % { -webkit - transform: translateY(-15 px) } }@ - moz - keyframes bounce { 0 % , 100 % , 20 % , 50 % , 80 % { -moz - transform: translateY(0) } 40 % { -moz - transform: translateY(-30 px) } 60 % { -moz - transform: translateY(-15 px) } }@ - ms - keyframes bounce { 0 % , 100 % , 20 % , 50 % , 80 % { -ms - transform: translateY(0) } 40 % { -ms - transform: translateY(-30 px) } 60 % { -ms - transform: translateY(-15 px) } }@ - o - keyframes bounce { 0 % , 100 % , 20 % , 50 % , 80 % { -o - transform: translateY(0) } 40 % { -o - transform: translateY(-30 px) } 60 % { -o - transform: translateY(-15 px) } }@ keyframes bounce { 0 % , 100 % , 20 % , 50 % , 80 % { transform: translateY(0) } 40 % { transform: translateY(-30 px) } 60 % { transform: translateY(-15 px) } }.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(-3 deg) } 30 % , 50 % , 70 % , 90 % { -webkit - transform: scale(1.1) rotate(3 deg) } 40 % , 60 % , 80 % { -webkit - transform: scale(1.1) rotate(-3 deg) } }@ - moz - keyframes tada { 0 % , 100 % { -moz - transform: scale(1) rotate(0) } 10 % , 20 % { -moz - transform: scale(0.9) rotate(-3 deg) } 30 % , 50 % , 70 % , 90 % { -moz - transform: scale(1.1) rotate(3 deg) } 40 % , 60 % , 80 % { -moz - transform: scale(1.1) rotate(-3 deg) } }@ - ms - keyframes tada { 0 % , 100 % { -ms - transform: scale(1) rotate(0) } 10 % , 20 % { -ms - transform: scale(0.9) rotate(-3 deg) } 30 % , 50 % , 70 % , 90 % { -ms - transform: scale(1.1) rotate(3 deg) } 40 % , 60 % , 80 % { -ms - transform: scale(1.1) rotate(-3 deg) } }@ - o - keyframes tada { 0 % , 100 % { -o - transform: scale(1) rotate(0) } 10 % , 20 % { -o - transform: scale(0.9) rotate(-3 deg) } 30 % , 50 % , 70 % , 90 % { -o - transform: scale(1.1) rotate(3 deg) } 40 % , 60 % , 80 % { -o - transform: scale(1.1) rotate(-3 deg) } }@ keyframes tada { 0 % , 100 % { transform: scale(1) rotate(0) } 10 % , 20 % { transform: scale(0.9) rotate(-3 deg) } 30 % , 50 % , 70 % , 90 % { transform: scale(1.1) rotate(3 deg) } 40 % , 60 % , 80 % { transform: scale(1.1) rotate(-3 deg) } }.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(15 deg) } 40 % { -webkit - transform: rotate(-10 deg) } 60 % { -webkit - transform: rotate(5 deg) } 80 % { -webkit - transform: rotate(-5 deg) } 100 % { -webkit - transform: rotate(0 deg) } }@ - moz - keyframes wave { 20 % { -moz - transform: rotate(15 deg) } 40 % { -moz - transform: rotate(-10 deg) } 60 % { -moz - transform: rotate(5 deg) } 80 % { -moz - transform: rotate(-5 deg) } 100 % { -moz - transform: rotate(0 deg) } }@ - ms - keyframes wave { 20 % { -ms - transform: rotate(15 deg) } 40 % { -ms - transform: rotate(-10 deg) } 60 % { -ms - transform: rotate(5 deg) } 80 % { -ms - transform: rotate(-5 deg) } 100 % { -ms - transform: rotate(0 deg) } }@ - o - keyframes wave { 20 % { -o - transform: rotate(15 deg) } 40 % { -o - transform: rotate(-10 deg) } 60 % { -o - transform: rotate(5 deg) } 80 % { -o - transform: rotate(-5 deg) } 100 % { -o - transform: rotate(0 deg) } }@ keyframes wave { 20 % { transform: rotate(15 deg) } 40 % { transform: rotate(-10 deg) } 60 % { transform: rotate(5 deg) } 80 % { transform: rotate(-5 deg) } 100 % { transform: rotate(0 deg) } }.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(0 deg) } 100 % { -webkit - transform: rotate(360 deg) } }@ - moz - keyframes spin { 0 % { -moz - transform: rotate(0 deg) } 100 % { -moz - transform: rotate(360 deg) } }@ - ms - keyframes spin { 0 % { -ms - transform: rotate(0 deg) } 100 % { -ms - transform: rotate(360 deg) } }@ - o - keyframes spin { 0 % { -o - transform: rotate(0 deg) } 100 % { -o - transform: rotate(360 deg) } }@ keyframes spin { 0 % { transform: rotate(0 deg) } 100 % { transform: rotate(360 deg) } }.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(0 deg) } 20 % , 30 % { -webkit - transform: rotate(-45 deg) } 100 % { -webkit - transform: rotate(360 deg) } }@ - moz - keyframes pullback { 0 % { -moz - transform: rotate(0 deg) } 20 % , 30 % { -moz - transform: rotate(-45 deg) } 100 % { -moz - transform: rotate(360 deg) } }@ - ms - keyframes pullback { 0 % { -ms - transform: rotate(0 deg) } 20 % , 30 % { -ms - transform: rotate(-45 deg) } 100 % { -ms - transform: rotate(360 deg) } }@ - o - keyframes pullback { 0 % { -o - transform: rotate(0 deg) } 20 % , 30 % { -o - transform: rotate(-45 deg) } 100 % { -o - transform: rotate(360 deg) } }@ keyframes pullback { 0 % { transform: rotate(0 deg) } 20 % , 30 % { transform: rotate(-45 deg) } 100 % { transform: rotate(360 deg) } }.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(0 px) } 15 % { -webkit - transform: translateX(-25 px) rotate(-5 deg) } 30 % { -webkit - transform: translateX(20 px) rotate(3 deg) } 45 % { -webkit - transform: translateX(-15 px) rotate(-3 deg) } 60 % { -webkit - transform: translateX(10 px) rotate(2 deg) } 75 % { -webkit - transform: translateX(-5 px) rotate(-1 deg) } 100 % { -webkit - transform: translateX(0 px) } }@ - moz - keyframes wobble { 0 % { -moz - transform: translateX(0 px) } 15 % { -moz - transform: translateX(-25 px) rotate(-5 deg) } 30 % { -moz - transform: translateX(20 px) rotate(3 deg) } 45 % { -moz - transform: translateX(-15 px) rotate(-3 deg) } 60 % { -moz - transform: translateX(10 px) rotate(2 deg) } 75 % { -moz - transform: translateX(-5 px) rotate(-1 deg) } 100 % { -moz - transform: translateX(0 px) } }@ - ms - keyframes wobble { 0 % { -ms - transform: translateX(0 px) } 15 % { -ms - transform: translateX(-25 px) rotate(-5 deg) } 30 % { -ms - transform: translateX(20 px) rotate(3 deg) } 45 % { -ms - transform: translateX(-15 px) rotate(-3 deg) } 60 % { -ms - transform: translateX(10 px) rotate(2 deg) } 75 % { -ms - transform: translateX(-5 px) rotate(-1 deg) } 100 % { -ms - transform: translateX(0 px) } }@ - o - keyframes wobble { 0 % { -o - transform: translateX(0 px) } 15 % { -o - transform: translateX(-25 px) rotate(-5 deg) } 30 % { -o - transform: translateX(20 px) rotate(3 deg) } 45 % { -o - transform: translateX(-15 px) rotate(-3 deg) } 60 % { -o - transform: translateX(10 px) rotate(2 deg) } 75 % { -o - transform: translateX(-5 px) rotate(-1 deg) } 100 % { -o - transform: translateX(0 px) } }@ keyframes wobble { 0 % { transform: translateX(0 px) } 15 % { transform: translateX(-25 px) rotate(-5 deg) } 30 % { transform: translateX(20 px) rotate(3 deg) } 45 % { transform: translateX(-15 px) rotate(-3 deg) } 60 % { transform: translateX(10 px) rotate(2 deg) } 75 % { transform: translateX(-5 px) rotate(-1 deg) } 100 % { transform: translateX(0 px) } }.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(-3 deg) } 20 % , 40 % { -webkit - transform: scale(1) rotate(-3 deg) } 30 % { -webkit - transform: scale(1.1) rotate(3 deg) } 50 % , 70 % , 90 % { -webkit - transform: scale(1) rotate(3 deg) } 80 % { -webkit - transform: scale(1.1) rotate(-3 deg) } }@ - moz - keyframes panic { 0 % , 100 % { -moz - transform: scale(1) rotate(0) } 10 % , 60 % { -moz - transform: scale(1.1) rotate(-3 deg) } 20 % , 40 % { -moz - transform: scale(1) rotate(-3 deg) } 30 % { -moz - transform: scale(1.1) rotate(3 deg) } 50 % , 70 % , 90 % { -moz - transform: scale(1) rotate(3 deg) } 80 % { -moz - transform: scale(1.1) rotate(-3 deg) } }@ - ms - keyframes panic { 0 % , 100 % { -ms - transform: scale(1) rotate(0) } 10 % , 60 % { -ms - transform: scale(1.1) rotate(-3 deg) } 20 % , 40 % { -ms - transform: scale(1) rotate(-3 deg) } 30 % { -ms - transform: scale(1.1) rotate(3 deg) } 50 % , 70 % , 90 % { -ms - transform: scale(1) rotate(3 deg) } 80 % { -ms - transform: scale(1.1) rotate(-3 deg) } }@ - o - keyframes panic { 0 % , 100 % { -o - transform: scale(1) rotate(0) } 10 % , 60 % { -o - transform: scale(1.1) rotate(-3 deg) } 20 % , 40 % { -o - transform: scale(1) rotate(-3 deg) } 30 % { -o - transform: scale(1.1) rotate(3 deg) } 50 % , 70 % , 90 % { -o - transform: scale(1) rotate(3 deg) } 80 % { -o - transform: scale(1.1) rotate(-3 deg) } }@ keyframes panic { 0 % , 100 % { transform: scale(1) rotate(0) } 10 % , 60 % { transform: scale(1.1) rotate(-3 deg) } 20 % , 40 % { transform: scale(1) rotate(-3 deg) } 30 % { transform: scale(1.1) rotate(3 deg) } 50 % , 70 % , 90 % { transform: scale(1) rotate(3 deg) } 80 % { transform: scale(1.1) rotate(-3 deg) } }.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(-3 deg) } 60 % { -webkit - transform: scale(.3) rotate(-5 deg) } 30 % { -webkit - transform: scale(.4) rotate(8 deg) } 40 % { -webkit - transform: scale(.3) rotate(-11 deg) } 50 % { -webkit - transform: scale(.4) rotate(14 deg) } 70 % { -webkit - transform: scale(.2) rotate(17 deg) } 80 % { opacity: 1; - webkit - transform: scale(.2) rotate(-20 deg) } 100 % { opacity: 0; - webkit - transform: scale(10) rotate(360 deg) } }@ - moz - keyframes explode { 0 % { opacity: 1; - moz - transform: scale(1) } 20 % { -moz - transform: scale(.3) rotate(-3 deg) } 60 % { -moz - transform: scale(.3) rotate(-5 deg) } 30 % { -moz - transform: scale(.4) rotate(8 deg) } 40 % { -moz - transform: scale(.3) rotate(-11 deg) } 50 % { -moz - transform: scale(.4) rotate(14 deg) } 70 % { -moz - transform: scale(.2) rotate(17 deg) } 80 % { opacity: 1; - moz - transform: scale(.2) rotate(-20 deg) } 100 % { opacity: 0; - moz - transform: scale(10) rotate(360 deg) } }@ - ms - keyframes explode { 0 % { opacity: 1; - ms - transform: scale(1) } 20 % { -ms - transform: scale(.3) rotate(-3 deg) } 60 % { -ms - transform: scale(.3) rotate(-5 deg) } 30 % { -ms - transform: scale(.4) rotate(8 deg) } 40 % { -ms - transform: scale(.3) rotate(-11 deg) } 50 % { -ms - transform: scale(.4) rotate(14 deg) } 70 % { -ms - transform: scale(.2) rotate(17 deg) } 80 % { opacity: 1; - ms - transform: scale(.2) rotate(-20 deg) } 100 % { opacity: 0; - ms - transform: scale(10) rotate(360 deg) } }@ - o - keyframes explode { 0 % { opacity: 1; - o - transform: scale(1) } 20 % { -o - transform: scale(.3) rotate(-3 deg) } 60 % { -o - transform: scale(.3) rotate(-5 deg) } 30 % { -o - transform: scale(.4) rotate(8 deg) } 40 % { -o - transform: scale(.3) rotate(-11 deg) } 50 % { -o - transform: scale(.4) rotate(14 deg) } 70 % { -o - transform: scale(.2) rotate(17 deg) } 80 % { opacity: 1; - o - transform: scale(.2) rotate(-20 deg) } 100 % { opacity: 0; - o - transform: scale(10) rotate(360 deg) } }@ keyframes explode { 0 % { opacity: 1;transform: scale(1) } 20 % { transform: scale(.3) rotate(-3 deg) } 60 % { transform: scale(.3) rotate(-5 deg) } 30 % { transform: scale(.4) rotate(8 deg) } 40 % { transform: scale(.3) rotate(-11 deg) } 50 % { transform: scale(.4) rotate(14 deg) } 70 % { transform: scale(.2) rotate(17 deg) } 80 % { opacity: 1;transform: scale(.2) rotate(-20 deg) } 100 % { opacity: 0;transform: scale(10) rotate(360 deg) } }.animate.explode, .trigger.explode { -webkit - animation - name: explode; - moz - animation - name: explode; - ms - animation - name: explode; - o - animation - name: explode; animation - name: explode } }