CODEWITHSUNDEEP
csscolorsanimate.css
DifferentPseudonym
DifferentPseudonym

Reputation: 1024

CSS Change Text Color Randomly

I know how to make that with JS but in http://daneden.github.io/animate.css/ Animate.css text changes so smoothly and there's no JS on it!

Can someone explain me?

Thanks

Upvotes: 5

Views: 18002

Answers (3)

Vangel Tzo
Vangel Tzo

Reputation: 9313

h1 {
    color: #f35626;
    background-image: -webkit-linear-gradient(92deg, #f35626, #feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 60s infinite linear;
}

@-webkit-keyframes hue {
    from {
      -webkit-filter: hue-rotate(0deg);
    }

    to {
      -webkit-filter: hue-rotate(360deg);
    }
}

for a markup like this

<h1>CHANGE COLOR TEXT</h1>

You can see an example here : http://jsfiddle.net/3oqep26z/

Modify the animation time for faster color changes

Upvotes: 14

Hex.style
Hex.style

Reputation: 91

This is css3 features. Will work not everywhere

Set animation in some style:

-webkit-animation-duration: 10s;

Name it

-webkit-animation-name: colours;

And use in the way you need

@-webkit-keyframes colours {
      0% {background-color: #39f;}
     15% {background-color: #8bc5d1;}
     30% {background-color: #f8cb4a;}
     45% {background-color: #95b850;}
     60% {background-color: #944893;}
     75% {background-color: #c71f00;}
     90% {background-color: #bdb280;}
    100% {background-color: #39f;}
}

Example: http://jsfiddle.net/gk37un0r/

Upvotes: 0

Lewis Tracy
Lewis Tracy

Reputation: 61

My guess is that it would be with CSS3 I found this online

http://imajineweb.com/csstexthover

Upvotes: 0

Related Questions