Sid Gifari File Manager
🏠 Root
/
home
/
ailwtbdh
/
public_html
/
wp-content
/
plugins
/
element-ready-lite
/
assets
/
css
/
widgets
/
Editing: position-element copy.css
/* ----------------------- POSITION ELEMENT -------------------------*/ /* .posiion__element__ready__wrap { width: 100vw; display: block; transform: translateX(-50%); position: relative; left: 50%; } */ .jump{ -webkit-animation-name: jump; animation-name: jump; } @-webkit-keyframes jump { 0% {transform: translate3d(0px, 0px, 0px);}40% {transform: translate3d(0px, 50%, 0px);}100% {transform: translate3d(0px, 0px, 0px);} } @keyframes jump { 0% {transform: translate3d(0px, 0px, 0px);}40% {transform: translate3d(0px, 50%, 0px);}100% {transform: translate3d(0px, 0px, 0px);} } .rotated{ -webkit-animation-name: rotated; animation-name: rotated; } @-webkit-keyframes rotated { 0% {transform: rotate(0deg);}100% {transform: rotate(360deg);} } @keyframes rotated { 0% {transform: rotate(0deg);}100% {transform: rotate(360deg);} } .rotatedHalf{ -webkit-animation-name: rotatedHalf; animation-name: rotatedHalf; } @-webkit-keyframes rotatedHalf { 0% {transform: rotate(0deg);}50% {transform: rotate(90deg);}100% {transform: rotate(0deg);} } @keyframes rotatedHalf { 0% {transform: rotate(0deg);}50% {transform: rotate(90deg);}100% {transform: rotate(0deg);} } .rotatedHalfTwo{ -webkit-animation-name: rotatedHalfTwo; animation-name: rotatedHalfTwo; } @-webkit-keyframes rotatedHalfTwo { 0% {transform: rotate(-90deg);}100% {transform: rotate(90deg);} } @keyframes rotatedHalfTwo { 0% {transform: rotate(-90deg);}100% {transform: rotate(90deg);} } .scaleUpOne{ -webkit-animation-name: scaleUpOne; animation-name: scaleUpOne; } @-webkit-keyframes scaleUpOne { 0% {transform: scale(1);}100% {transform: scale(0.2);} } @keyframes scaleUpOne { 0% {transform: scale(1);}100% {transform: scale(0.2);} } .scaleRight{ -webkit-animation-name: scaleRight; animation-name: scaleRight; } @-webkit-keyframes scaleRight { 0% {transform: translateX(-50%);}50% {transform: translateX(50%);}100% {transform: translateX(-50%);} } @keyframes scaleRight { 0% {transform: translateX(-50%);}50% {transform: translateX(50%);}100% {transform: translateX(-50%);} } .fade_in{ -webkit-animation-name: fade_in; animation-name: fade_in; } @-webkit-keyframes fade_in { 0% {opacity: 0.7;}40% {opacity: 1;}100% {opacity: 0.7;} } @keyframes fade_in { 0% {opacity: 0.7;}40% {opacity: 1;}100% {opacity: 0.7;} } .prettyFade{ -webkit-animation-name: prettyFade; animation-name: prettyFade; } @-webkit-keyframes prettyFade{ 0%{-webkit-filter:brightness(1) contrast(1) saturate(1);};100%{-webkit-filter:brightness(0) contrast(5) saturate(0.5); }; } @keyframes prettyFade{ 0%{-webkit-filter:brightness(1) contrast(1) saturate(1);};100%{-webkit-filter:brightness(0) contrast(5) saturate(0.5); }; } .rippleOutOne{ -webkit-animation-name: rippleOutOne; animation-name: rippleOutOne; } @-webkit-keyframes rippleOutOne { 0% {bottom: 0;left: 0;opacity: 1;right: 0;top: 0;}100% {bottom: -6px;left: -6px;opacity: 0;right: -6px;top: -6px;} } @keyframes rippleOutOne { 0% {bottom: 0;left: 0;opacity: 1;right: 0;top: 0;}100% {bottom: -6px;left: -6px;opacity: 0;right: -6px;top: -6px;} } .rippleOuTwo{ -webkit-animation-name: rippleOuTwo; animation-name: rippleOuTwo; } @-webkit-keyframes rippleOuTwo { 0% {bottom: 0;left: 0;opacity: 1;right: 0;top: 0;}100% {bottom: -12px;left: -12px;opacity: 0;right: -12px;top: -12px;} } @keyframes rippleOuTwo { 0% {bottom: 0;left: 0;opacity: 1;right: 0;top: 0;}100% {bottom: -12px;left: -12px;opacity: 0;right: -12px;top: -12px;} } .scaleUpOne{ -webkit-animation-name: scaleUpOne; animation-name: scaleUpOne; } @keyframes scaleUpOne { 0% {transform: scale(1);}40% {transform: scale(0.5);}100% {transform: scale(1);} } .scaleUpTwo{ -webkit-animation-name: scaleUpTwo; animation-name: scaleUpTwo; } @-webkit-keyframes scaleUpTwo { 0% {transform: scale(0.5);}40% {transform: scale(0.8);}100% {transform: scale(0.5);} } @keyframes scaleUpTwo { 0% {transform: scale(0.5);}40% {transform: scale(0.8);}100% {transform: scale(0.5);} } .scaleUpThree{ -webkit-animation-name: scaleUpThree; animation-name: scaleUpThree; } @-webkit-keyframes scaleUpThree { 0% {transform: scale(0.7);}40% {transform: scale(0.4);}100% {transform: scale(0.7);} } @keyframes scaleUpThree { 0% {transform: scale(0.7);}40% {transform: scale(0.4);}100% {transform: scale(0.7);} } .FramesOne{ -webkit-animation-name: FramesOne; animation-name: FramesOne; } @-webkit-keyframes FramesOne { 0% {transform: translate(0px, 0px) rotate(0deg);}20% {transform: translate(73px, -1px) rotate(36deg);}40% {transform: translate(141px, 72px) rotate(72deg);}60% {transform: translate(83px, 122px) rotate(108deg);}80% {transform: translate(-40px, 72px) rotate(144deg);}100% {transform: translate(0px, 0px) rotate(0deg);} } @keyframes FramesOne { 0% {transform: translate(0px, 0px) rotate(0deg);}20% {transform: translate(73px, -1px) rotate(36deg);}40% {transform: translate(141px, 72px) rotate(72deg);}60% {transform: translate(83px, 122px) rotate(108deg);}80% {transform: translate(-40px, 72px) rotate(144deg);}100% {transform: translate(0px, 0px) rotate(0deg);} } .FramesTwo{ -webkit-animation-name: FramesTwo; animation-name: FramesTwo; } @-webkit-keyframes FramesTwo { 0% {transform: translate(0px, 0px) rotate(0deg) scale(1);}20% {transform: translate(73px, -1px) rotate(36deg) scale(0.9);}40% {transform: translate(141px, 72px) rotate(72deg) scale(1);}60% {transform: translate(83px, 122px) rotate(108deg) scale(1.2);}80% {transform: translate(-40px, 72px) rotate(144deg) scale(1.1);}100% {transform: translate(0px, 0px) rotate(0deg) scale(1);} } @keyframes FramesTwo { 0% {transform: translate(0px, 0px) rotate(0deg) scale(1);}20% {transform: translate(73px, -1px) rotate(36deg) scale(0.9);}40% {transform: translate(141px, 72px) rotate(72deg) scale(1);}60% {transform: translate(83px, 122px) rotate(108deg) scale(1.2);}80% {transform: translate(-40px, 72px) rotate(144deg) scale(1.1);}100% {transform: translate(0px, 0px) rotate(0deg) scale(1);} } .FramesThree{ -webkit-animation-name: FramesThree; animation-name: FramesThree; } @-webkit-keyframes FramesThree { 0% {transform: translate(165px, -179px);}100% {transform: translate(-346px, 617px);} } @keyframes FramesThree { 0% {transform: translate(165px, -179px);}100% {transform: translate(-346px, 617px);} } .FramesFour{ -webkit-animation-name: FramesFour; animation-name: FramesFour; } @-webkit-keyframes FramesFour { 0% {transform: translate(-300px, 151px) rotate(0deg);}100% {transform: translate(251px, -200px) rotate(180deg);} } @keyframes FramesFour { 0% {transform: translate(-300px, 151px) rotate(0deg);}100% {transform: translate(251px, -200px) rotate(180deg);} } .FramesFive{ -webkit-animation-name: FramesFive; animation-name: FramesFive; } @-webkit-keyframes FramesFive { 0% {transform: translate(61px, -99px) rotate(0deg);}21% {transform: translate(4px, -190px) rotate(38deg);}41% {transform: translate(-139px, -200px) rotate(74deg);}60% {transform: translate(-263px, -164px) rotate(108deg);}80% {transform: translate(-195px, -49px) rotate(144deg);}100% {transform: translate(-1px, 0px) rotate(180deg);} } @keyframes FramesFive { 0% {transform: translate(61px, -99px) rotate(0deg);}21% {transform: translate(4px, -190px) rotate(38deg);}41% {transform: translate(-139px, -200px) rotate(74deg);}60% {transform: translate(-263px, -164px) rotate(108deg);}80% {transform: translate(-195px, -49px) rotate(144deg);}100% {transform: translate(-1px, 0px) rotate(180deg);} } .gradientBG{ -webkit-animation-name: gradientBG; animation-name: gradientBG; } @-webkit-keyframes gradientBG { 0% {background-position: 0 0;}50% {background-position: 300% 0;}100% {background-position: 0 0;} } @keyframes gradientBG { 0% {background-position: 0 0;}50% {background-position: 300% 0;}100% {background-position: 0 0;} } .gradientBG{ -webkit-animation-name: gradientBG; animation-name: gradientBG; } @keyframes gradientBG { 0% {background-position: 0 0;}50% {background-position: 120% 0;}100% {background-position: 0 0;} } .bgMove{ -webkit-animation-name: bgMove; animation-name: bgMove; } @-webkit-keyframes bgMove { from { background-position: 0 0; }to { background-position: -400px 0; } } @keyframes bgMove { from { background-position: 0 0; }to { background-position: -400px 0; } } .imageBgAnim{ -webkit-animation-name: imageBgAnim; animation-name: imageBgAnim; } @-webkit-keyframes imageBgAnim { 0% {background-position: 0 0;}50% {background-position: 120% 0;}100% {background-position: 0 0;} } @keyframes imageBgAnim { 0% {background-position: 0 0;}50% {background-position: 120% 0;}100% {background-position: 0 0;} } .zoomBounce{ -webkit-animation-name: zoomBounce; animation-name: zoomBounce; } @-webkit-keyframes zoomBounce { 0% {transform: scale(0.9)translateY(-50%);}50% {transform: scale(1)translateY(-60%);}100% {transform: scale(0.9)translateY(-50%);} } @keyframes zoomBounce { 0% {transform: scale(0.9)translateY(-50%);}50% {transform: scale(1)translateY(-60%);}100% {transform: scale(0.9)translateY(-50%);} } .ballBounce{ -webkit-animation-name: ballBounce; animation-name: ballBounce; } @-webkit-keyframes ballBounce { 0% {transform: translateX(-20px) scale(1, 1.2);}25% {transform: scale(1.2, 1);}50% {transform: translateX(15px) scale(1, 1.2);}75% {transform: scale(1.2, 1);}100% {transform: translateX(-20px);} } @keyframes ballBounce { 0% {transform: translateX(-20px) scale(1, 1.2);}25% {transform: scale(1.2, 1);}50% {transform: translateX(15px) scale(1, 1.2);}75% {transform: scale(1.2, 1);}100% {transform: translateX(-20px);} } .bigSpin{ -webkit-animation-name: bigSpin; animation-name: bigSpin; } @-webkit-keyframes bigSpin { 0% {transform: rotate(0deg);}100% {transform: rotate(360deg);} } @keyframes bigSpin { 0% {transform: rotate(0deg);}100% {transform: rotate(360deg);} } .Zoom_In_Out{ -webkit-animation: zoom-in-out; animation: zoom-in-out; } @-webkit-keyframes zoom-in-out { 0% { transform: scale(0.9) } 50% { transform: scale(1.1) } 100% { transform: scale(0.9) } } @keyframes zoom-in-out { 0% { transform: scale(0.9) } 50% { transform: scale(1.1) } 100% { transform: scale(0.9) } } .Circle_Large{ -webkit-animation: circle-large; animation: circle-large; } @-webkit-keyframes circle-large { 0% { transform: rotate(0deg) translate(-150px) rotate(0deg); } 100% { transform: rotate(360deg) translate(-150px) rotate(-360deg); } } @keyframes circle-large { 0% { transform: rotate(0deg) translate(-150px) rotate(0deg); } 100% { transform: rotate(360deg) translate(-150px) rotate(-360deg); } } .Fade_In_Out{ -webkit-animation: fade-in-out; animation: fade-in-out; } @-webkit-keyframes fade-in-out { 0% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1); } } @keyframes fade-in-out { 0% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(0.5); } 100% { opacity: 0; transform: scale(1); } } .blurFadeInOut{ -webkit-animation-name: blurFadeInOut; animation-name: blurFadeInOut; } @-webkit-keyframes blurFadeInOut { 0% {opacity: 0;text-shadow: 0px 0px 40px #ffffff;transform: scale(1.3);}20%, 75% {opacity: 1;text-shadow: 0px 0px 1px #ffffff;transform: scale(1);}100% {opacity: 0;text-shadow: 0px 0px 50px #ffffff;transform: scale(0);} } @keyframes blurFadeInOut { 0% {opacity: 0;text-shadow: 0px 0px 40px #ffffff;transform: scale(1.3);}20%, 75% {opacity: 1;text-shadow: 0px 0px 1px #ffffff;transform: scale(1);}100% {opacity: 0;text-shadow: 0px 0px 50px #ffffff;transform: scale(0);} } .blurFadeIn{ -webkit-animation-name: blurFadeIn; animation-name: blurFadeIn; } @-webkit-keyframes blurFadeIn { 0% {opacity: 0;text-shadow: 0px 0px 40px #ffffff;transform: scale(1.3);}50% {opacity: 0.5;text-shadow: 0px 0px 10px #ffffff;transform: scale(1.1);}100% {opacity: 1;text-shadow: 0px 0px 1px #ffffff;transform: scale(1);} } @keyframes blurFadeIn { 0% {opacity: 0;text-shadow: 0px 0px 40px #ffffff;transform: scale(1.3);}50% {opacity: 0.5;text-shadow: 0px 0px 10px #ffffff;transform: scale(1.1);}100% {opacity: 1;text-shadow: 0px 0px 1px #ffffff;transform: scale(1);} } .fadeInBack{ -webkit-animation-name: fadeInBack; animation-name: fadeInBack; } @-webkit-keyframes fadeInBack { 0% {opacity: 0;transform: scale(0);}50% {opacity: 0.4;transform: scale(2);}100% {opacity: 0.2;transform: scale(5);} } @keyframes fadeInBack { 0% {opacity: 0;transform: scale(0);}50% {opacity: 0.4;transform: scale(2);}100% {opacity: 0.2;transform: scale(5);} } .fadeInRotate{ -webkit-animation-name: fadeInRotate; animation-name: fadeInRotate; } @-webkit-keyframes fadeInRotate { 0% {opacity: 0;transform: scale(0) rotate(360deg);}100% {opacity: 1;transform: scale(1) rotate(0deg);} } @keyframes fadeInRotate { 0% {opacity: 0;transform: scale(0) rotate(360deg);}100% {opacity: 1;transform: scale(1) rotate(0deg);} } .bigSquare { -webkit-animation-name: bigSquare; animation-name: bigSquare; } @-webkit-keyframes bigSquare { from {transform: translateY(10%) rotate(-80deg) scale(0);}to {transform: translateY(0) rotate(0deg) scale(1);} } @keyframes bigSquare { from {transform: translateY(10%) rotate(-80deg) scale(0);}to {transform: translateY(0) rotate(0deg) scale(1);} } .littleSquare { -webkit-animation-name: littleSquare; animation-name: littleSquare; } @-webkit-keyframes littleSquare { from {transform: translate(226%, 183%) rotate(140deg) scale(0);}to {transform: translate(0%, 0%) rotate(0deg) scale(1);} } @keyframes littleSquare { from {transform: translate(226%, 183%) rotate(140deg) scale(0);}to {transform: translate(0%, 0%) rotate(0deg) scale(1);} } .triAngle { -webkit-animation-name: triAngle; animation-name: triAngle; } @-webkit-keyframes triAngle { from {transform: rotate(-140deg) scale(0);}to {transform: rotate(0deg) scale(1);} } @keyframes triAngle { from {transform: rotate(-140deg) scale(0);}to {transform: rotate(0deg) scale(1);} } .Hoop { -webkit-animation-name: Hoop; animation-name: Hoop; } @-webkit-keyframes Hoop { from {transform: translate(-160%, -33%) scale(0);}to {transform: translate(0%, 0%) scale(1);} } @keyframes Hoop { from {transform: translate(-160%, -33%) scale(0);}to {transform: translate(0%, 0%) scale(1);} } .bigCircle { -webkit-animation-name: bigCircle; animation-name: bigCircle; } @-webkit-keyframes bigCircle { from {transform: scale(0) translate(60%, 3%);}to {transform: scale(1) translate(0%, 0%);} } @keyframes bigCircle { from {transform: scale(0) translate(60%, 3%);}to {transform: scale(1) translate(0%, 0%);} } .littleCircle { -webkit-animation-name: littleCircle; animation-name: littleCircle; } @-webkit-keyframes littleCircle { from {transform: scale(0);}to {transform: scale(1);} } @keyframes littleCircle { from {transform: scale(0);}to {transform: scale(1);} } /* Dots ---------------------------*/ /*.circle_animate {z-index: 0;animation: dots 6s infinite linear;} @keyframes dots_circle {from {transform: rotate(-360deg)}to {transform: rotate(0)}} @keyframes dot_circle_1 {from {transform: translate(15%, 5%);opacity: 1;}to {transform: translate(25%, 5%);opacity: 1;}} @keyframes dot_circle_2 {from {transform: translate(-8%, 8%);opacity: 1;}to {transform: translate(-19%, 19%);opacity: 1;}} @keyframes dot_circle_3 {from {transform: translate(-5%, -12%);opacity: 1;}to {transform: translate(-10%, -24%);opacity: 1;}}*/ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.fast { -webkit-animation-duration: 800ms; animation-duration: 800ms; } .animated.faster { -webkit-animation-duration: 500ms; animation-duration: 500ms; } .animated.slow { -webkit-animation-duration: 2s; animation-duration: 2s; } .animated.slower { -webkit-animation-duration: 3s; animation-duration: 3s; }
Save
Cancel