如何淡入/退出多个文本使用CSS / jQuery像Droplr？ [英] How to Fade In/Out multiple texts using CSS/jQuery like on 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（）;特征。我不知道。

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!

推荐答案

DEMO

使用纯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？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！