/********************************************************************* TRANSLATION ANIMATIONS *********************************************************************/ /* --------------------------- | translateLeft animation | |-------------------------| | | | | | _ _ | | [_] <------- [_] | | | | | | | --------------------------- */ @keyframes translateLeft_1 { 0% {transform : translate(0px);} 100% {transform : translate(-1px);} } @keyframes translateLeft_10 { 0% {transform : translate(0px);} 100% {transform : translate(-10px);} } @keyframes translateLeft_100 { 0% {transform : translate(0px);} 100% {transform : translate(-100px);} } @keyframes translateLeft_1000 { 0% {transform : translate(0px);} 100% {transform : translate(-1000px);} } @keyframes translateLeft_10000 { 0% {transform : translate(0px);} 100% {transform : translate(-10000px);} } @keyframes translateLeft_100000 { 0% {transform : translate(0px);} 100% {transform : translate(-100000px);} } @keyframes translateLeft_1000000 { 0% {transform : translate(0px);} 100% {transform : translate(-1000000px);} } /* --------------------------- |translateRight animation | |-------------------------| | | | | | _ _ | | [_] -------> [_] | | | | | | | --------------------------- */ @keyframes translateRight_1 { 0% {transform : translate(0px);} 100% {transform : translate(1px);} } @keyframes translateRight_10 { 0% {transform : translate(0px);} 100% {transform : translate(10px);} } @keyframes translateRight_100 { 0% {transform : translate(0px);} 100% {transform : translate(100px);} } @keyframes translateRight_1000 { 0% {transform : translate(0px);} 100% {transform : translate(1000px);} } @keyframes translateRight_10000 { 0% {transform : translate(0px);} 100% {transform : translate(10000px);} } @keyframes translateRight_100000 { 0% {transform : translate(0px);} 100% {transform : translate(100000px);} } @keyframes translateRight_1000000 { 0% {transform : translate(0px);} 100% {transform : translate(1000000px);} } /* --------------------------- | translateUp animation | |-------------------------| | _ | | [_] | | | | ^ | | | | | _ | | [_] | | | --------------------------- */ @keyframes translateUp_1 { 0% {transform : translate(0px,0px);} 100% {transform : translate(0px,-1px);} } @keyframes translateUp_10 { 0% {transform : translate(0px,0px);} 100% {transform : translate(0px,-10px);} } @keyframes translateUp_100 { 0% {transform : translate(0px,0px);} 100% {transform : translate(0px,-100px);} } @keyframes translateUp_1000 { 0% {transform : translate(0px,0px);} 100% {transform : translate(0px,-1000px);} } @keyframes translateUp_10000 { 0% {transform : translate(0px,0px);} 100% {transform : translate(0px,-10000px);} } @keyframes translateUp_100000 { 0% {transform : translate(0px,0px);} 100% {transform : translate(0px,-100000px);} } @keyframes translateUp_1000000 { 0% {transform : translate(0px,0px);} 100% {transform : translate(0px,-1000000px);} } /* --------------------------- | translateDown animation | |-------------------------| | _ | | [_] | | | | | | | V | | _ | | [_] | | | --------------------------- */ @keyframes translateDown_1 { 0% {transform : translate(0px,0px);} 100% {transform : translate(0px,1px);} } @keyframes translateDown_10 { 0% {transform : translate(0px,0px);} 100% {transform : translate(0px,10px);} } @keyframes translateDown_100 { 0% {transform : translate(0px,0px);} 100% {transform : translate(0px,100px);} } @keyframes translateDown_1000 { 0% {transform : translate(0px,0px);} 100% {transform : translate(0px,1000px);} } @keyframes translateDown_10000 { 0% {transform : translate(0px,0px);} 100% {transform : translate(0px,10000px);} } @keyframes translateDown_100000 { 0% {transform : translate(0px,0px);} 100% {transform : translate(0px,100000px);} } @keyframes translateDown_1000000 { 0% {transform : translate(0px,0px);} 100% {transform : translate(0px,1000000px);} } /* --------------------------- | translate animation | |-------------------------| | _ | | [_] | | | | \ | | _| | | _ | | [_] | | | --------------------------- */ @keyframes translate_1 { 0% {transform : translate(0px,0px);} 100% {transform : translate(1px,1px);} } @keyframes translate_10 { 0% {transform : translate(0px,0px);} 100% {transform : translate(10px,10px);} } @keyframes translate_100 { 0% {transform : translate(0px,0px);} 100% {transform : translate(100px,100px);} } @keyframes translate_1000 { 0% {transform : translate(0px,0px);} 100% {transform : translate(1000px,1000px);} } @keyframes translate_10000 { 0% {transform : translate(0px,0px);} 100% {transform : translate(10000px,10000px);} } @keyframes translate_100000 { 0% {transform : translate(0px,0px);} 100% {transform : translate(100000px,100000px);} } @keyframes translate_1000000 { 0% {transform : translate(0px,0px);} 100% {transform : translate(1000000px,1000000px);} } /* --------------------------- | oscillateLeft animation | |-------------------------| | | | | | _ _ | | [_] <------> [_] | | | | | | | --------------------------- */ @keyframes oscillateLeft_1 { 0% {transform : translate(0px);} 50% {transform : translate(-1px);} 100% {transform : translate(0px);} } @keyframes oscillateLeft_10 { 0% {transform : translate(0px);} 50% {transform : translate(-10px);} 100% {transform : translate(0px);} } @keyframes oscillateLeft_100 { 0% {transform : translate(0px);} 50% {transform : translate(-100px);} 100% {transform : translate(0px);} } @keyframes oscillateLeft_1000 { 0% {transform : translate(0px);} 50% {transform : translate(-1000px);} 100% {transform : translate(0px);} } @keyframes oscillateLeft_10000 { 0% {transform : translate(0px);} 50% {transform : translate(-10000px);} 100% {transform : translate(0px);} } @keyframes oscillateLeft_100000 { 0% {transform : translate(0px);} 50% {transform : translate(-100000px);} 100% {transform : translate(0px);} } @keyframes oscillateLeft_1000000 { 0% {transform : translate(0px);} 50% {transform : translate(-1000000px);} 100% {transform : translate(0px);} } /* --------------------------- |oscillateRight animation | |-------------------------| | | | | | _ _ | | [_] <------> [_] | | | | | | | --------------------------- */ @keyframes oscillateRight_1 { 0% {transform : translate(0px);} 50% {transform : translate(1px);} 100% {transform : translate(0px);} } @keyframes oscillateRight_10 { 0% {transform : translate(0px);} 50% {transform : translate(10px);} 100% {transform : translate(0px);} } @keyframes oscillateRight_100 { 0% {transform : translate(0px);} 50% {transform : translate(100px);} 100% {transform : translate(0px);} } @keyframes oscillateRight_1000 { 0% {transform : translate(0px);} 50% {transform : translate(1000px);} 100% {transform : translate(0px);} } @keyframes oscillateRight_10000 { 0% {transform : translate(0px);} 50% {transform : translate(10000px);} 100% {transform : translate(0px);} } @keyframes oscillateRight_100000 { 0% {transform : translate(0px);} 50% {transform : translate(100000px);} 100% {transform : translate(0px);} } @keyframes oscillateRight_1000000 { 0% {transform : translate(0px);} 50% {transform : translate(1000000px);} 100% {transform : translate(0px);} } /* --------------------------- | oscillateUp animation | |-------------------------| | _ | | [_] | | | | ^ | | | | | v | | _ | | [_] | | | --------------------------- */ @keyframes oscillateUp_1 { 0% {transform : translate(0px,0px);} 50% {transform : translate(0px,-1px);} 100% {transform : translate(0px,0px);} } @keyframes oscillateUp_10 { 0% {transform : translate(0px,0px);} 50% {transform : translate(0px,-10px);} 100% {transform : translate(0px,0px);} } @keyframes oscillateUp_100 { 0% {transform : translate(0px,0px);} 50% {transform : translate(0px,-100px);} 100% {transform : translate(0px,0px);} } @keyframes oscillateUp_1000 { 0% {transform : translate(0px,0px);} 50% {transform : translate(0px,-1000px);} 100% {transform : translate(0px,0px);} } @keyframes oscillateUp_10000 { 0% {transform : translate(0px,0px);} 50% {transform : translate(0px,-10000px);} 100% {transform : translate(0px,0px);} } @keyframes oscillateUp_100000 { 0% {transform : translate(0px,0px);} 50% {transform : translate(0px,-100000px);} 100% {transform : translate(0px,0px);} } @keyframes oscillateUp_1000000 { 0% {transform : translate(0px,0px);} 50% {transform : translate(0px,-1000000px);} 100% {transform : translate(0px,0px);} } /* --------------------------- | oscillateDown animation | |-------------------------| | _ | | [_] | | | | ^ | | | | | v | | _ | | [_] | | | --------------------------- */ @keyframes oscillateDown_1 { 0% {transform : translate(0px,0px);} 50% {transform : translate(0px,1px);} 100% {transform : translate(0px,0px);} } @keyframes oscillateDown_10 { 0% {transform : translate(0px,0px);} 50% {transform : translate(0px,10px);} 100% {transform : translate(0px,0px);} } @keyframes oscillateDown_100 { 0% {transform : translate(0px,0px);} 50% {transform : translate(0px,100px);} 100% {transform : translate(0px,0px);} } @keyframes oscillateDown_1000 { 0% {transform : translate(0px,0px);} 50% {transform : translate(0px,1000px);} 100% {transform : translate(0px,0px);} } @keyframes oscillateDown_10000 { 0% {transform : translate(0px,0px);} 50% {transform : translate(0px,10000px);} 100% {transform : translate(0px,0px);} } @keyframes oscillateDown_100000 { 0% {transform : translate(0px,0px);} 50% {transform : translate(0px,100000px);} 100% {transform : translate(0px,0px);} } @keyframes oscillateDown_1000000 { 0% {transform : translate(0px,0px);} 50% {transform : translate(0px,1000000px);} 100% {transform : translate(0px,0px);} } /* --------------------------- | osclliate animation | |-------------------------| | _ | | [_] | | _ | | | | | \ | | _| | | _ | | [_] | | | --------------------------- */ @keyframes oscillate_1 { 0% {transform : translate(0px,0px);} 50% {transform : translate(1px,1px);} 100% {transform : translate(0px,0px);} } @keyframes oscillate_10 { 0% {transform : translate(0px,0px);} 50% {transform : translate(10px,10px);} 100% {transform : translate(0px,0px);} } @keyframes oscillate_100 { 0% {transform : translate(0px,0px);} 50% {transform : translate(100px,100px);} 100% {transform : translate(0px,0px);} } @keyframes oscillate_1000 { 0% {transform : translate(0px,0px);} 50% {transform : translate(1000px,1000px);} 100% {transform : translate(0px,0px);} } @keyframes oscillate_10000 { 0% {transform : translate(0px,0px);} 50% {transform : translate(10000px,10000px);} 100% {transform : translate(0px,0px);} } @keyframes oscillate_100000 { 0% {transform : translate(0px,0px);} 50% {transform : translate(100000px,100000px);} 100% {transform : translate(0px,0px);} } @keyframes oscillate_1000000 { 0% {transform : translate(0px,0px);} 50% {transform : translate(1000000px,1000000px);} 100% {transform : translate(0px,0px);} } /******************************************************************************************************************************************************************/