How to Fade In/Out multiple texts using CSS/jQuery

Question

I've seen this type of animation on a website just when CSS3 key-frames started to gain momentum, but couldn't find it nor could I replicate it using CSS or jQuery, and here's where I thought some of you could help.

I've animated what I hope to achieve and I've embedded it below. I believe this can be coded using the new CSS3 key-frames or jQuery's .animate(); feature. I don't know. I've tried everything I know, but all in vain.

Here's the GIF animation of what I wanted:

I just noticed, http://droplr.com/ uses a very similar transition on their home page, but with a few sliding effects. And the data (words) that come up are all random, all the time. I'd like to know how that is possible!

Answer 1

I know that question is solved, but I thought it might be helpful for someone else so I decided to share xD

I was looking for something more smoother than the sugestion that here was presented, after spend a time looking i made my own solution

Here we will need to think a bit in terms of timeline of an keyframe, in that case the text will only be displayed when the another one has already completed his fade animation

div{
  posititon: relative;
}
.js-nametag{
  position: absolute;
}
.js-nametag:nth-child(1){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate-reverse;  
}


.js-nametag:nth-child(2){
  animation-name: fade;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-duration: 5s;
  animation-direction: alternate;
}

@keyframes fade{
    0%,50% {
      opacity: 0;
}
    100%{
      opacity: 1;
  }
}

  <p class="js-nametag">Leandro de Lima</p>
  <p class="js-nametag">Game Master</p>

Answer 2

The lowest effort approach is probably to use the Morphext jQuery plug-in:

https://github.com/MrSaints/Morphext

It's powered by animate.css, so it's easy to change the animation style of the text.

If you're looking for something a bit more powerful (can specify in AND out animations; animate not just text), there's a spin-off called Morphist:

https://github.com/MrSaints/Morphist

Answer 3

Something like this:

JSFiddle Demo

HTML

<p>I am <span>Something</span><span class="hidden">Test22222</span></p>

CSS

.hidden {display:none;}
span { position: absolute; left:45px; top:10px;}
p {width:200px; border:1px solid #000; padding:10px; position:relative;}

jQuery

$(document).ready(function() {

    // run the fade() function every 2 seconds
    setInterval(function(){
        fade();
    },2000);


    // toggle between fadeIn and fadeOut with 0.3s fade duration.
    function fade(){
        $("span").fadeToggle(300);
    }

});

Note : this only works with toggling 2 words, it might be better to have an array of words, and to write a function to loop through those and apply the `fadeIn/fadeOut animation.

Edit : Here is a solution for multiple words - https://stackoverflow.com/a/2772278/2470724 it uses an array to store each word and then loops through them.

Edit 2 : Non-array solution : http://jsfiddle.net/kMBMp/ This version loops through an un-ordered list which has display:none on it

Answer 4

DEMO

A possible solution with pure css!

@-webkit-keyframes fade-in{
from{
    opacity:1;
    top:0px;
}
to{
    opacity:0;
    top:-5px;
}
}
.text-animated-one{
display:inline;
position:relative;
top:0px;
-webkit-animation:fade-in 1s infinite;

}
.text-animated-two{
opacity:0;
display:inline;
position:relative;
margin-left:-56px;
-webkit-animation:fade-in 1s infinite;
-webkit-animation-delay:0.5s;
}

.aggettivi{
display:inline;
width:100px;
height:100px;
}

Answer 5

Some extensive Google Searching and experimenting has led me to the point where I can answer my own question, and just in time too!

If any of you would like to know how that can be done, check out this CodePen snippet I wrote: http://codepen.io/AmruthPillai/pen/axvqB