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
avatar
Ace 1
Helper
Helper

Male Posts : 804
Reputation : 53
Language : English - French?
Location : Druid Hill Park

http://help.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;
              }
}
avatar
Sir. Mayo
Forumember

Male Posts : 975
Reputation : 90
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;
    }
avatar
Ace 1
Helper
Helper

Male Posts : 804
Reputation : 53
Language : English - French?
Location : Druid Hill Park

http://help.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.
avatar
Sir. Mayo
Forumember

Male Posts : 975
Reputation : 90
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.
avatar
Ace 1
Helper
Helper

Male Posts : 804
Reputation : 53
Language : English - French?
Location : Druid Hill Park

http://help.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
avatar
Ange Tuteur
Forumaster

Male Posts : 13130
Reputation : 2816
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
avatar
Ace 1
Helper
Helper

Male Posts : 804
Reputation : 53
Language : English - French?
Location : Druid Hill Park

http://help.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.

avatar
SLGray
Administrator
Administrator

Male Posts : 38491
Reputation : 2589
Language : English
Location : United States

http://ztwds.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}
avatar
Ace 1
Helper
Helper

Male Posts : 804
Reputation : 53
Language : English - French?
Location : Druid Hill Park

http://help.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.

avatar
SLGray
Administrator
Administrator

Male Posts : 38491
Reputation : 2589
Language : English
Location : United States

http://ztwds.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.
avatar
Ace 1
Helper
Helper

Male Posts : 804
Reputation : 53
Language : English - French?
Location : Druid Hill Park

http://help.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



avatar
APE
Manager
Manager

Male Posts : 9887
Reputation : 915
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