如何使用CSS / jQuery的像Droplr以淡入/淡出多个文本？

问题描述：

我见过一个网站就在CSS3的关键帧开始获得动力这一类型的动画，但没有找到，也没有使用CSS或jQuery的它，我可以复制了，这里就是我想你们中的一些可能帮助。

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.

我的动画我希望实现什么，我下面嵌入它。我相信这可以使用新的CSS3关键帧或jQuery的.animate（）codeD;特征。我不知道。我试过，我知道一切，但一切都是徒劳的。

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.

下面是什么，我想要的GIF动画：

Here's the GIF animation of what I wanted:

我只注意到， http://droplr.com/ 使用在其主页上非常类似的转变，但与一些滑动的效果。并且拿出数据（字）都是随机的，所有的时间。我想知道这是可能的！

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!

答

演示

纯CSS的一个可能的解决方案！

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

如何使用CSS / jQuery的像Droplr以淡入/淡出多个文本？

相关推荐