css - 如何像 Droplr 一样使用 CSS/jQuery 淡入/淡出多个文本？

Question

当 CSS3 关键帧开始流行时，我在一个网站上看到了这种类型的动画，但找不到它，也无法使用 CSS 或 jQuery 复制它，我认为你们中的一些人可以在这里帮助。

我已将我希望实现的目标制作成动画，并将其嵌入下方。我相信这可以使用新的 CSS3 关键帧或 jQuery 的 .animate(); 进行编码。特征。我不知道。我已经尝试了我所知道的一切，但都是徒劳的。

这是我想要的 GIF 动画:

我刚注意到，http://droplr.com/在他们的主页上使用非常相似的过渡，但有一些滑动效果。出现的数据(词)都是随机的，一直都是。我想知道这怎么可能!

Answer 1

DEMO

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