Color transitions with fade in a word

Question

I have a code that is making color transitions, has to leave a fade in this transition, IE, so it does not keep changing so "dry", I am doing with JS, is there any CSS what makes it? Anyway, wanted in the color transition, a fade was executed.

EXAMPLE

Answer 1

If you want to make a blinking effect (with fade-in and fade-out) you can do so:

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: https://jsfiddle.net/s0r82xbx/

This way you don’t need jQuery-UI and you do the animation with CSS. Notice that the fade-in/fade-out effect in this example is fictitious because I’m changing color between the color of background (background white) and 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.

Answer 2

The "blinking text" effect can be obtained 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>

Answer 3

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

If you want to change the color status on some link through mouse behavior, 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 a underline under the word :

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:active {
    text-decoration: underline;
}

You can modify 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;
}

Answer 4

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

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

And the 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

Note that I define one color for the natural state of the class, and another for the :hover. To transition tells me the property color will transition in a linear way, between the colors defined by me, in a time of 2s. Read more about Transitions here.

An example of how this code works can be seen on this flash drive.