/************************************************************************ SCALE ANIMATIONS ************************************************************************/ /* ------------------------------------ ------------------------------------ | scaleWith animation | | scaleWidth animation | |----------------------------------| |----------------------------------| | | | | | | | | | | ----> | | | _ | | ____ | | |_| | | |____| | | | | | | <----> | | <----> | | | | | | | | | ------------------------------------ ------------------------------------ */ @keyframes scaleWidth_0p1 { 0% {transform : scale(1,1);} 100% {transform : scale(.1,1);} } @keyframes scaleWidth_0p25 { 0% {transform : scale(1,1);} 100% {transform : scale(.25,1);} } @keyframes scaleWidth_0p5 { 0% {transform : scale(1,1);} 100% {transform : scale(.5,1);} } @keyframes scaleWidth_0p75 { 0% {transform : scale(1,1);} 100% {transform : scale(.75,1);} } @keyframes scaleWidth_1p1 { 0% {transform : scale(1,1);} 100% {transform : scale(1.1,1);} } @keyframes scaleWidth_1p25 { 0% {transform : scale(1,1);} 100% {transform : scale(1.25,1);} } @keyframes scaleWidth_1p5 { 0% {transform : scale(1,1);} 100% {transform : scale(1.5,1);} } @keyframes scaleWidth_1p75 { 0% {transform : scale(1,1);} 100% {transform : scale(1.75,1);} } @keyframes scaleWidth_2 { 0% {transform : scale(1,1);} 100% {transform : scale(2,1);} } @keyframes scaleWidth_4 { 0% {transform : scale(1,1);} 100% {transform : scale(4,1);} } @keyframes scaleWidth_8 { 0% {transform : scale(1,1);} 100% {transform : scale(8,1);} } @keyframes scaleWidth_10 { 0% {transform : scale(1,1);} 100% {transform : scale(10,1);} } @keyframes scaleWidth_100 { 0% {transform : scale(1,1);} 100% {transform : scale(100,1);} } @keyframes scaleWidth_1000 { 0% {transform : scale(1,1);} 100% {transform : scale(1000,1);} } @keyframes scaleWidth_10000 { 0% {transform : scale(1,1);} 100% {transform : scale(10000,1);} } @keyframes scaleWidth_100000 { 0% {transform : scale(1,1);} 100% {transform : scale(100000,1);} } @keyframes scaleWidth_1000000 { 0% {transform : scale(1,1);} 100% {transform : scale(1000000,1);} } /* ------------------------------------ ------------------------------------ | scaleHeight animation | | scaleHeight animation | |----------------------------------| |----------------------------------| | | | | | | | | | | ----> | _ ^ | | _ ^ | | | | | | | |_| | | | |_| | | | v | | v | | | | | | | | | | | | | ------------------------------------ ------------------------------------ */ @keyframes scaleHeight_0p1 { 0% {transform : scale(1,1);} 100% {transform : scale(1,.1);} } @keyframes scaleHeight_0p25 { 0% {transform : scale(1,1);} 100% {transform : scale(1,.25);} } @keyframes scaleHeight_0p5 { 0% {transform : scale(1,1);} 100% {transform : scale(1,.5);} } @keyframes scaleHeight_0p75 { 0% {transform : scale(1,1);} 100% {transform : scale(1,.75);} } @keyframes scaleHeight_1p1 { 0% {transform : scale(1,1);} 100% {transform : scale(1,1.1);} } @keyframes scaleHeight_1p25 { 0% {transform : scale(1,1);} 100% {transform : scale(1,1.25);} } @keyframes scaleHeight_1p5 { 0% {transform : scale(1,1);} 100% {transform : scale(1,1.5);} } @keyframes scaleHeight_1p75 { 0% {transform : scale(1,1);} 100% {transform : scale(1,1.75);} } @keyframes scaleHeight_2 { 0% {transform : scale(1,1);} 100% {transform : scale(1,2);} } @keyframes scaleHeight_4 { 0% {transform : scale(1,1);} 100% {transform : scale(1,4);} } @keyframes scaleHeight_8 { 0% {transform : scale(1,1);} 100% {transform : scale(1,8);} } @keyframes scaleHeight_10 { 0% {transform : scale(1,1);} 100% {transform : scale(1,10);} } @keyframes scaleHeight_100 { 0% {transform : scale(1,1);} 100% {transform : scale(1,100);} } @keyframes scaleHeight_1000 { 0% {transform : scale(1,1);} 100% {transform : scale(1,1000);} } @keyframes scaleHeight_10000 { 0% {transform : scale(1,1);} 100% {transform : scale(1,10000);} } @keyframes scaleHeight_100000 { 0% {transform : scale(1,1);} 100% {transform : scale(1,100000);} } @keyframes scaleHeight_1000000 { 0% {transform : scale(1,1);} 100% {transform : scale(1,1000000);} } /* ------------------------------------ ------------------------------------ | scale animation | | scale animation | |----------------------------------| |----------------------------------| | | | | | | | | | | ----> | ___ ^ | | _ ^ | | | | | | | |_| | | | |___| | | | v | | v | | <----> | | <----> | | | | | | | | | ------------------------------------ ------------------------------------ */ @keyframes scale_0p1 { 0% {transform : scale(1,1);} 100% {transform : scale(.1,.1);} } @keyframes scale_0p25 { 0% {transform : scale(1,1);} 100% {transform : scale(.25,.25);} } @keyframes scale_0p5 { 0% {transform : scale(1,1);} 100% {transform : scale(.5,.5);} } @keyframes scale_0p75 { 0% {transform : scale(1,1);} 100% {transform : scale(.75,.75);} } @keyframes scale_1p1 { 0% {transform : scale(1,1);} 100% {transform : scale(1.1,1.1);} } @keyframes scale_1p25 { 0% {transform : scale(1,1);} 100% {transform : scale(1.25,1.25);} } @keyframes scale_1p5 { 0% {transform : scale(1,1);} 100% {transform : scale(1.5,1.5);} } @keyframes scale_1p75 { 0% {transform : scale(1,1);} 100% {transform : scale(1.75,1.75);} } @keyframes scale_2 { 0% {transform : scale(1,1);} 100% {transform : scale(2,2);} } @keyframes scale_4 { 0% {transform : scale(1,1);} 100% {transform : scale(4,4);} } @keyframes scale_8 { 0% {transform : scale(1,1);} 100% {transform : scale(8,8);} } @keyframes scale_10 { 0% {transform : scale(1,1);} 100% {transform : scale(10,10);} } @keyframes scale_100 { 0% {transform : scale(1,1);} 100% {transform : scale(100,100);} } @keyframes scale_1000 { 0% {transform : scale(1,1);} 100% {transform : scale(1000,1000);} } @keyframes scale_10000 { 0% {transform : scale(1,1);} 100% {transform : scale(10000,10000);} } @keyframes scale_100000 { 0% {transform : scale(1,1);} 100% {transform : scale(100000,100000);} } @keyframes scale_1000000 { 0% {transform : scale(1,1);} 100% {transform : scale(1000000,1000000);} } /* ------------------------------------ ------------------------------------ ------------------------------------ | pulseWith animation | | pulseWidth animation | | pulseWidth animation | |----------------------------------| |----------------------------------| |----------------------------------| | | | | | | | | | | | | | | ----> | | ----> | | | _ | | ____ | | _ | | |_| | | |____| | | |_| | | | | | | | | <----> | | <----> | | <----> | | --><-- | | --><-- | | --><-- | | | | | | | ------------------------------------ ------------------------------------ ------------------------------------ */ @keyframes pulseWidth_0p1 { 0% {transform : scale(1,1);} 50% {transform : scale(.1,1);} 100% {transform : scale(1,1);} } @keyframes pulseWidth_0p25 { 0% {transform : scale(1,1);} 50% {transform : scale(.25,1);} 100% {transform : scale(1,1);} } @keyframes pulseWidth_0p5 { 0% {transform : scale(1,1);} 50% {transform : scale(.5,1);} 100% {transform : scale(1,1);} } @keyframes pulseWidth_0p75 { 0% {transform : scale(1,1);} 50% {transform : scale(.75,1);} 100% {transform : scale(1,1);} } @keyframes pulseWidth_1p1 { 0% {transform : scale(1,1);} 50% {transform : scale(1.1,1);} 100% {transform : scale(1,1);} } @keyframes pulseWidth_1p25 { 0% {transform : scale(1,1);} 50% {transform : scale(1.25,1);} 100% {transform : scale(1,1);} } @keyframes pulseWidth_1p5 { 0% {transform : scale(1,1);} 50% {transform : scale(1.5,1);} 100% {transform : scale(1,1);} } @keyframes pulseWidth_1p75 { 0% {transform : scale(1,1);} 50% {transform : scale(1.75,1);} 100% {transform : scale(1,1);} } @keyframes pulseWidth_2 { 0% {transform : scale(1,1);} 50% {transform : scale(2,1);} 100% {transform : scale(1,1);} } @keyframes pulseWidth_4 { 0% {transform : scale(1,1);} 50% {transform : scale(4,1);} 100% {transform : scale(1,1);} } @keyframes pulseWidth_8 { 0% {transform : scale(1,1);} 50% {transform : scale(8,1);} 100% {transform : scale(1,1);} } @keyframes pulseWidth_10 { 0% {transform : scale(1,1);} 50% {transform : scale(10,1);} 100% {transform : scale(1,1);} } @keyframes pulseWidth_100 { 0% {transform : scale(1,1);} 50% {transform : scale(100,1);} 100% {transform : scale(1,1);} } @keyframes pulseWidth_1000 { 0% {transform : scale(1,1);} 50% {transform : scale(1000,1);} 100% {transform : scale(1,1);} } @keyframes pulseWidth_10000 { 0% {transform : scale(1,1);} 50% {transform : scale(10000,1);} 100% {transform : scale(1,1);} } @keyframes pulseWidth_100000 { 0% {transform : scale(1,1);} 50% {transform : scale(100000,1);} 100% {transform : scale(1,1);} } @keyframes pulseWidth_1000000 { 0% {transform : scale(1,1);} 50% {transform : scale(1000000,1);} 100% {transform : scale(1,1);} } /* ------------------------------------ ------------------------------------ ------------------------------------ | pulseHeight animation | | pulseHeight animation | | pulseHeight animation | |----------------------------------| |----------------------------------| |----------------------------------| | | | | | | | | | | | | | | ----> | _ ^ | | ----> | | | _ ^ | | | | | | v | | _ ^ | | | |_| | x | | |_| | ^ | | |_| | x | | v | | | v | | | v | | | | | | | | | | | | | | | | | | | | ------------------------------------ ------------------------------------ ------------------------------------ */ @keyframes pulseHeight_0p1 { 0% {transform : scale(1,1);} 50% {transform : scale(1,.1);} 100% {transform : scale(1,1);} } @keyframes pulseHeight_0p25 { 0% {transform : scale(1,1);} 50% {transform : scale(1,.25);} 100% {transform : scale(1,1);} } @keyframes pulseHeight_0p5 { 0% {transform : scale(1,1);} 50% {transform : scale(1,.5);} 100% {transform : scale(1,1);} } @keyframes pulseHeight_0p75 { 0% {transform : scale(1,1);} 50% {transform : scale(1,.75);} 100% {transform : scale(1,1);} } @keyframes pulseHeight_1p1 { 0% {transform : scale(1,1);} 50% {transform : scale(1,1.1);} 100% {transform : scale(1,1);} } @keyframes pulseHeight_1p25 { 0% {transform : scale(1,1);} 50% {transform : scale(1,1.25);} 100% {transform : scale(1,1);} } @keyframes pulseHeight_1p5 { 0% {transform : scale(1,1);} 50% {transform : scale(1,1.5);} 100% {transform : scale(1,1);} } @keyframes pulseHeight_1p75 { 0% {transform : scale(1,1);} 50% {transform : scale(1,1.75);} 100% {transform : scale(1,1);} } @keyframes pulseHeight_2 { 0% {transform : scale(1,1);} 50% {transform : scale(1,2);} 100% {transform : scale(1,1);} } @keyframes pulseHeight_4 { 0% {transform : scale(1,1);} 50% {transform : scale(1,4);} 100% {transform : scale(1,1);} } @keyframes pulseHeight_8 { 0% {transform : scale(1,1);} 50% {transform : scale(1,8);} 100% {transform : scale(1,1);} } @keyframes pulseHeight_10 { 0% {transform : scale(1,1);} 50% {transform : scale(1,10);} 100% {transform : scale(1,1);} } @keyframes pulseHeight_100 { 0% {transform : scale(1,1);} 50% {transform : scale(1,100);} 100% {transform : scale(1,1);} } @keyframes pulseHeight_1000 { 0% {transform : scale(1,1);} 50% {transform : scale(1,1000);} 100% {transform : scale(1,1);} } @keyframes pulseHeight_10000 { 0% {transform : scale(1,1);} 50% {transform : scale(1,10000);} 100% {transform : scale(1,1);} } @keyframes pulseHeight_100000 { 0% {transform : scale(1,1);} 50% {transform : scale(1,100000);} 100% {transform : scale(1,1);} } @keyframes pulseHeight_1000000 { 0% {transform : scale(1,1);} 50% {transform : scale(1,1000000);} 100% {transform : scale(1,1);} } /* ------------------------------------ ------------------------------------ ------------------------------------ | pulse animation | | pulse animation | | pulse animation | |----------------------------------| |----------------------------------| |----------------------------------| | | | | | | | | | | | | | | ----> | ____ ^ | | ----> | | | _ ^ | | | | | | v | | _ ^ | | | |_| | x | | |____| | ^ | | |_| | x | | v | | | v | | | v | | | <----> | | <----> | | <----> | | --x-- | | --x-- | | --x-- | | | | | | | ------------------------------------ ------------------------------------ ------------------------------------ */ @keyframes pulse_0p1 { 0% {transform : scale(1,1);} 50% {transform : scale(.1,.1);} 100% {transform : scale(1,1);} } @keyframes pulse_0p25 { 0% {transform : scale(1,1);} 50% {transform : scale(.25,.25);} 100% {transform : scale(1,1);} } @keyframes pulse_0p5 { 0% {transform : scale(1,1);} 50% {transform : scale(.5,.5);} 100% {transform : scale(1,1);} } @keyframes pulse_0p75 { 0% {transform : scale(1,1);} 50% {transform : scale(.75,.75);} 100% {transform : scale(1,1);} } @keyframes pulse_1p1 { 0% {transform : scale(1,1);} 50% {transform : scale(1.1,1.1);} 100% {transform : scale(1,1);} } @keyframes pulse_1p25 { 0% {transform : scale(1,1);} 50% {transform : scale(1.25,1.25);} 100% {transform : scale(1,1);} } @keyframes pulse_1p5 { 0% {transform : scale(1,1);} 50% {transform : scale(1.5,1.5);} 100% {transform : scale(1,1);} } @keyframes pulse_2 { 0% {transform : scale(1,1);} 50% {transform : scale(2,2);} 100% {transform : scale(1,1);} } @keyframes pulse_4 { 0% {transform : scale(1,1);} 50% {transform : scale(4,4);} 100% {transform : scale(1,1);} } @keyframes pulse_8 { 0% {transform : scale(1,1);} 50% {transform : scale(8,8);} 100% {transform : scale(1,1);} } @keyframes pulse_10 { 0% {transform : scale(1,1);} 50% {transform : scale(10,10);} 100% {transform : scale(1,1);} } @keyframes pulse_100 { 0% {transform : scale(1,1);} 50% {transform : scale(100,100);} 100% {transform : scale(1,1);} } @keyframes pulse_1000 { 0% {transform : scale(1,1);} 50% {transform : scale(1000,1000);} 100% {transform : scale(1,1);} } @keyframes pulse_10000 { 0% {transform : scale(1,1);} 50% {transform : scale(10000,10000);} 100% {transform : scale(1,1);} } @keyframes pulse_100000 { 0% {transform : scale(1,1);} 50% {transform : scale(100000,100000);} 100% {transform : scale(1,1);} } @keyframes pulse_1000000 { 0% {transform : scale(1,1);} 50% {transform : scale(1000000,1000000);} 100% {transform : scale(1,1);} } /******************************************************************************************************************************************************************/