21

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:

GIF animation where the text "I am" is static and the word "invincible" fades out, the word "awesome" fades in, the word "awesome" fades back out, and the word "invincible" fades back in, in an infinite loop.

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!

BSMP
  • 4,596
  • 8
  • 33
  • 44
Amruth Pillai
  • 1,539
  • 2
  • 13
  • 28

5 Answers5

16

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;
}
rpasianotto
  • 1,383
  • 1
  • 9
  • 22
12

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>

https://codepen.io/theNewt/details/PdWeKX

Leandro Lima
  • 298
  • 3
  • 12
  • 3
    This is great! How would you add a 3rd bit of text to this and adjust the keyframes so that it fades in/out between the 3 on an infinite loop? – fsylothian Apr 22 '20 at 10:18
  • Hello thanks for the question, unfortunately this solution only works for at maximum two phrases, for more than two and/or dynamic numbers I recommend you to use JS or Jquery to create something more robust for this animation, ;) – Leandro Lima Jun 04 '20 at 17:32
  • 1
    This worked perfectly! You can change the fade time by modifying `animation-duration` – jefelewis Dec 24 '20 at 05:41
7

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

OGHaza
  • 4,795
  • 7
  • 23
  • 29
Amruth Pillai
  • 1,539
  • 2
  • 13
  • 28
  • 1
    @Nick-R That method included having to input the words in the jQuery script it self. How about when the content is dynamic? Anyway, I found a way to do it, using HTML as the data source and jQuery as the animator. Check out the link in the above answer! :) – Amruth Pillai Jun 22 '13 at 19:56
  • 2
    Glad you found a solution :) Well I re-wrote the example I found (the one that used an `array` to store the words) - This is my modified version - http://jsfiddle.net/kMBMp/1/ It works by looping through the `unordered` list, which has `display:none` on it. So this method would definitely work if the words were being `dynamically generated`. – Nick R Jun 22 '13 at 20:28
5

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

Community
  • 1
  • 1
Nick R
  • 7,704
  • 2
  • 22
  • 32
  • I was just about to ask you an option for more words! :D A function loop? My mistake for thinking this was going to be a walk in the park to code :P Thanks for taking the time to write this up though, it's certainly helpful. Check out my edit on the question, might shed some more light on the topic. – Amruth Pillai Jun 22 '13 at 19:33
  • @Amruth A. Pillai I just found what you want for multiple words - http://stackoverflow.com/a/2772278/2470724 This is what I was thinking of writing for the solution. So you have an `array` of words. Like this `var terms = ["term 1", "term 2", "term 3"]` – Nick R Jun 22 '13 at 19:41
1

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

Tony He
  • 126
  • 1
  • 5