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!
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;
}