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

问题描述

就在 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!

推荐答案

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

I know that question is solved, but I thought it might be helpful for someone else so I decided to share xD

我一直在寻找比这里介绍的更流畅的东西，经过一段时间的寻找，我做了自己的解决方案

I was looking for something more smoother than the sugestion that here was presented, after spend a time looking i made my own solution

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

Here we will need to think a bit in terms of timeline of an keyframe, in that case the text will only be displayed when the another one has already completed his fade animation

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

这篇关于如何像 Droplr 一样使用 CSS/jQuery 淡入/淡出多个文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！