אפקט אנימציה עם גרדיאנט לטקסט

Unleash the power  with <span class="animated-word">animation</span>

Unleash the power  with <span class="animated-word">animation</span>

.animated-word {
    background: linear-gradient(
        to right,
        #ff6b81 20%,
        #3c40c6 40%,
        #0fbcf9 60%,
        #05c46b 90%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 500% auto;
    animation: AnimationName 12s ease-in-out infinite alternate;
}

@keyframes AnimationName {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.animated-word {
    background: linear-gradient(
        to right,
        #ff6b81 20%,
        #3c40c6 40%,
        #0fbcf9 60%,
        #05c46b 90%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    background-size: 500% auto;
    animation: AnimationName 12s ease-in-out infinite alternate;
}

@keyframes AnimationName {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}