如何在Droplr上使用CSS / jQuery淡入/淡出多个文本？

Question

我已经在网站上看到过这种类型的动画，就在CSS3关键帧开始获得动力时，但是找不到它，我也不能用CSS或jQuery复制它，而这里我认为你们中的一些人可以提供帮助。

我动画了我希望实现的内容，并将其嵌入到下面。我相信这可以使用新的CSS3关键帧或jQuery的.animate（）进行编码;特征。我不知道。我已经尝试过我所知道的一切，但都是徒劳的。

这是我想要的GIF动画：

我刚刚注意到，http://droplr.com/在他们的主页上使用了一个非常类似的过渡，但有一些滑动效果。并且出现的数据（单词）都是随机的。我想知道这是怎么可能的！

Answer 1

我知道这个问题已经解决，但我认为这可能对其他人有帮助所以我决定分享xD

我花了一些时间看我制作了自己的解决方案后，我正在寻找比这里提出的建议更顺畅的东西

在这里我们需要考虑一个关键帧的时间轴，在这种情况下，只有当另一个已完成他的淡入淡出动画时才会显示文本

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>

Answer 2

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

Answer 3

一些广泛的Google搜索和实验让我能够回答我自己的问题，并且及时！

如果您有任何人想知道如何做到这一点，请查看我写的CodePen片段：http://codepen.io/AmruthPillai/pen/axvqB

Answer 4

像这样的东西：

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

});

注意：这只适用于切换2个单词，最好有一个单词数组，并编写一个函数来循环遍历这些单词并应用`fadeIn / fadeOut动画。

编辑：这是一个多个单词的解决方案 - https://stackoverflow.com/a/2772278/2470724它使用array存储每个单词然后循环它们。

编辑2：非阵列解决方案：http://jsfiddle.net/kMBMp/这个版本循环通过un-ordered list上面有display:none

Answer 5

最省力的方法可能是使用Morphext jQuery插件：

https://github.com/MrSaints/Morphext

它由animate.css提供支持，因此可以轻松更改文本的动画样式。

如果你正在寻找更强大的东西（可以在AND动画中指定;动画不仅仅是文本），还有一个名为Morphist的副产品：

https://github.com/MrSaints/Morphist