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

Go down

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

Post by Ace 1 on Wed May 27, 2015 11:32 am

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 Wed Jun 03, 2015 7:58 am; edited 2 times in total
avatar
Ace 1
Helper
Helper

Male Posts : 842
Reputation : 63
Language : English - French?
Location : Druid Hill Park

https://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 Wed May 27, 2015 2: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 : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

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 Wed May 27, 2015 4: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 : 842
Reputation : 63
Language : English - French?
Location : Druid Hill Park

https://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 Wed May 27, 2015 4: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 : 980
Reputation : 90
Language : English, Some french.
Location : you can also reach me on snoonet's irc server. I idle in #Techsupport Username is Vault108

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 Wed May 27, 2015 4: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 : 842
Reputation : 63
Language : English - French?
Location : Druid Hill Park

https://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 Wed May 27, 2015 4: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 : 13202
Reputation : 2921
Language : EN, JA, FR
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

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

Post by Ace 1 on Wed May 27, 2015 4:36 pm

Oh thanks Very Happy
avatar
Ace 1
Helper
Helper

Male Posts : 842
Reputation : 63
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

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

Post by SLGray on Thu May 28, 2015 2: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 : 43866
Reputation : 3123
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

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

Post by Ace 1 on Thu May 28, 2015 2:45 pm

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

Male Posts : 842
Reputation : 63
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

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

Post by SLGray on Thu May 28, 2015 4: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 : 43866
Reputation : 3123
Language : English
Location : United States

http://fmthemesdesignteam.forumotion.com/

Back to top Go down

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

Post by Ace 1 on Thu May 28, 2015 4: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 : 842
Reputation : 63
Language : English - French?
Location : Druid Hill Park

https://help.forumotion.com

Back to top Go down

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

Post by APE on Sat Jun 06, 2015 8:44 am

Topic solved and archived 



avatar
APE
Administrator
Administrator

Male Posts : 12707
Reputation : 1344
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

Back to top


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