Fade color transitions in one word

If you want to make an effect of something flashing (with fade-in and fade-out) you can do this:

CSS:

#pisca {
    color: #fff;
    transition: color .7s;
}
.mostrar {
    color: #f34 !important;
}

JavaScript:

function pisca() {
    var $pisca = $('#pisca');
    $pisca.addClass('mostrar');
    setTimeout(function () {
        $pisca.removeClass('mostrar');
    }, 750);
}

window.onload = function () {
    setInterval(pisca, 1500);
}

jsFiddle: link

This way you do not need jQuery-UI and you do the animation with CSS. Note that the fade-in / fade-out effect in this example is fictitious since I am color changing between the color of the background and the red, thus giving the illusion of fade .

If you want to change opacity you can do so (using the same transition principle) would look like this (jsfiddle.net/s0r82xbx/1/ ) , but although the effect is less interesting.

The "blinking text" effect can be achieved using CSS only:

p {
  background-color: #000;
}
.piscar {
  color: #FFF;
  -webkit-animation-name: blinker;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: blinker;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  animation-name: blinker;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@-moz-keyframes blinker {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
@-webkit-keyframes blinker {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}
@keyframes blinker {
  0% {
    opacity: 1.0;
  }
  50% {
    opacity: 0.0;
  }
  100% {
    opacity: 1.0;
  }
}

<p>
  <span class="piscar">Olha lá pá, vez-me a piscar?</span>
</p>

There are some options below that you using CSS by modifying the color to white can contribute.

If you want to change the state to give color in some link through the behavior of the mouse, use:

a:link {
    color: #;
}

/* Quando entra no no navegar carrega a tela a cor fica "00FF00" */
a:visited {
    color: #00FF00;
}

/* Quando passa o mouse por cima a cor fica rosa */
a:hover {
    color: #FF00FF;
}

/* Quando aperta o link a cor passa pra azul escuro */
a:active {
    color: #0000FF;
}

You can also use these mouse events to add an underline below the word:

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

You can change the background of the example word:

a:link {
    background-color: #B2FF99;
}

a:visited {
    background-color: #FFFF85;
}

a:hover {
    background-color: #FF704D;
}

a:active {
    background-color: #FF704D;
}

Using hover as an example, you can easily transition in color using the transition property of CSS.

With the simple HTML: <span class="cor">Teste</span>

And CSS (In this case, SASS):

span.cor
    font-size: 30pt
    color: red
    transition: color ease-in-out 2s
    &:hover
        color: blue
        transition: color ease-in-out 2s

See that I define one color for the natural state of the class, and another for the :hover . The transition tells me that the color property will transition linearly between the colors defined by me in a 2s time. Read more about transitions here .

An example of the operation of this code can be seen on this pen .