The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

[Solved] Text Colors Fades Into Different Colors {Multi-Color Hover}

View previous topic View next topic Go down

Solved [Solved] Text Colors Fades Into Different Colors {Multi-Color Hover}

Post by Ace 1 on May 27th 2015, 5:32 pm

Hey guys Ik how to do a regular transition using CSS but how do I make a text color fade into another text color and then fade into another color?

Help me pls Very Happy


Last edited by Ace 1 on June 3rd 2015, 1:58 pm; edited 2 times in total

Ace 1
Forumember

Male Posts : 693
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: [Solved] Text Colors Fades Into Different Colors {Multi-Color Hover}

Post by Sir. Mayo on May 27th 2015, 8:26 pm

Hello @Ace 1

This should do the trick for you:
Code:
a:hover {
    animation: 3s multicolor;
    -webkit-animation: 3s multicolor;
}
@keyframes multicolor {
    0% {
        color: #000;
          }
    33% {
        color: #FF0000;
          }
    66% {
        color: #0000FF;
          }
    100% {
        color: #FFF;
            }
}
@-webkit-keyframes multicolor {
    0% {
        color: #000;
          }
    33% {
        color: #FF0000;
          }
    66% {
        color: #0000FF;
          }
    100% {
        color: #FFF;
              }
}

Sir. Mayo
Forumember

Male Posts : 963
Reputation : 85
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: [Solved] Text Colors Fades Into Different Colors {Multi-Color Hover}

Post by Ace 1 on May 27th 2015, 10:07 pm

@Sir. Mayo

No matter how I tweaked the code it didn't work. Here's what I had:

Code:
a{
 text-decoration:none;
 -webkit-transition: all 0.75s;
 -moz-transition: all 0.75s;
 transition: all 0.75s;
}

@keyframes colors {
 0% {color: #000;}
 33% {color: #0FF;}
 66% {color: #F00;}
 100% {color: #0FF;}
}
@-webkit-keyframes colors {
 0% {color: #000;}
 33% {color: #0FF;}
 66% {color: #F00;}
 100% {color: #0FF;}
}

a:hover{
    color: #0FF;
    text-decoration: none !important;
     animation: 5s colors !important;
      -webkit-animation: 5s colors !important;
    }

Ace 1
Forumember

Male Posts : 693
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: [Solved] Text Colors Fades Into Different Colors {Multi-Color Hover}

Post by Sir. Mayo on May 27th 2015, 10:22 pm

Try pasting this one as IS with out changing anything. I saw you added different things to the code, which may have caused the issue,

Code:
a:hover {
    animation: 3s multicolor;
    -webkit-animation: 3s multicolor;
}
@keyframes multicolor {
    0% {
        color: #000;
          }
    33% {
        color: #FF0000;
          }
    66% {
        color: #0000FF;
          }
    100% {
        color: #FFF;
            }
}
@-webkit-keyframes multicolor {
    0% {
        color: #000;
          }
    33% {
        color: #FF0000;
          }
    66% {
        color: #0000FF;
          }
    100% {
        color: #FFF;
              }
}

erase the other ones and just use this one as is.

Sir. Mayo
Forumember

Male Posts : 963
Reputation : 85
Language : English, Some french.
Location : Working 11Pm-7Am EST I will try to respond ASAP

http://sir-mayo.forumotion.com/

Back to top Go down

Solved Re: [Solved] Text Colors Fades Into Different Colors {Multi-Color Hover}

Post by Ace 1 on May 27th 2015, 10:31 pm

Sadly, it did not work even when I removed my other code. All of the code was removed except the one you gave me and it was if there was no transition at all.

Ace 1
Forumember

Male Posts : 693
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: [Solved] Text Colors Fades Into Different Colors {Multi-Color Hover}

Post by Ange Tuteur on May 27th 2015, 10:32 pm

His markup is fine, you just need to disable the following setting :
Display > Colors > CSS stylesheet > Optimize your CSS : NO

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: [Solved] Text Colors Fades Into Different Colors {Multi-Color Hover}

Post by Ace 1 on May 27th 2015, 10:36 pm

Oh thanks Very Happy

Ace 1
Forumember

Male Posts : 693
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: [Solved] Text Colors Fades Into Different Colors {Multi-Color Hover}

Post by SLGray on May 28th 2015, 8:12 pm

Please change the title of your topic to something that is related to your question/issue, so that other users will be able to find their question/issue using the search engine.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35661
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: [Solved] Text Colors Fades Into Different Colors {Multi-Color Hover}

Post by Ace 1 on May 28th 2015, 8:45 pm

@Ace 1 wrote:Look at me now {Multi-Color Hover}

Ace 1
Forumember

Male Posts : 693
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: [Solved] Text Colors Fades Into Different Colors {Multi-Color Hover}

Post by SLGray on May 28th 2015, 10:19 pm

What does Look At Me Now mean?


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35661
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Solved Re: [Solved] Text Colors Fades Into Different Colors {Multi-Color Hover}

Post by Ace 1 on May 28th 2015, 10:34 pm

Two things, the latter being more important.

1) The song by Chris Brown ft. Busta Rhyms and Lil' Wayne

2) literally meaning look at the text change as you hover over it.

The second one indicates the user to look at the color changing before their eyes which shows the relevance to the topic.

Ace 1
Forumember

Male Posts : 693
Reputation : 38
Language : my css ready java yo scripts boi
Location : Druid Hill Park smoking indo

http://genocideclan.forumotion.com

Back to top Go down

Solved Re: [Solved] Text Colors Fades Into Different Colors {Multi-Color Hover}

Post by APE on June 6th 2015, 2:44 pm

Topic solved and archived





APE
Manager
Manager

Male Posts : 8326
Reputation : 717
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum