20

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

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

这是我想要的 GIF 动画：

GIF动画里的文字

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

4

5 回答 5

16

演示

纯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;
}
于 2013-06-23T00:06:28.963 回答
11

我知道这个问题已经解决了，但我认为它可能对其他人有帮助，所以我决定分享 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>

https://codepen.io/theNewt/details/PdWeKX

于 2018-09-07T22:24:24.997 回答
7

一些广泛的谷歌搜索和实验使我能够及时回答我的问题！

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

于 2013-06-22T19:52:41.820 回答
5

像这样的东西：

JSFiddle 演示

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它使用 anarray来存储每个单词，然后遍历它们。

编辑 2：非数组解决方案：http: //jsfiddle.net/kMBMp/此版本循环遍历un-ordered list其中包含display:none的内容

于 2013-06-22T19:29:08.963 回答
1

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

https://github.com/MrSaints/Morphext

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

如果您正在寻找更强大的东西（可以指定输入和输出动画；动画不仅仅是文本），有一个名为 Morphist 的衍生产品：

https://github.com/MrSaints/Morphist

于 2016-02-01T23:23:30.577 回答