使用css淡入和淡出文本[重复]

Posted 2023-03-06

【中文标题】使用css淡入和淡出文本[重复]

【英文标题】：fade in and out text using css [duplicate]

【发布时间】：2016-04-02 10:49:26

【问题描述】：

在回答这个问题时，我尝试做似乎对其他人有用的事情：

How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?

它对我不起作用。 我想知道我可能做错了什么？

我的问题与上面的不一样，因为这个问题似乎只有一个淡入然后保持静止，而我希望几个不同的文本块相互淡入并循环。

这是页面： http://www.torahmates.org/index-test.asp

向下滚动到底部 - 我正在处理三个推荐，试图让它们彼此淡入。

这是我的代码：

<div class="row featurette testimonials">
  <div class="container">
    <div class="col-md-8 col-md-offset-2">

   <div class="testimonial-fade-group">
   <div class="testimonial-fade-one">
   <h3 class="text-center" style="font-weight:lighter; line-height:32px;     font-style:italic;">
   “TorahMates is the highlight of my week. I look forward to learning with my TorahMate each and every week, and it’s just a wonderful opportunity to learn and to grow. It’s a wonderful experience, and thank you very much to Oorah. I would tell anybody who does not have a torahMate, that this is the opportunity to gain and to grow, and to learn, and just to have an amazing time. I would tell them that they need to get a TorahMate because it’s our life-blood, food for the soul."</h3>
   <p class="text-center">
   -Behn Goldis 
   <span style="font-style:italic;">Melville, NY</span>
   </p>
    </div>

    <div class="testimonial-fade-two">
   <h3 class="text-center" style="font-weight:lighter; line-height:32px; font-style:italic;">
   “TorahMates is very inspirational, and I so look forward to speaking with my TorahMate and learning every single week, it’s very uplifting. I believe that each person, if you could find the opportunity to reach out to Oorah to get a TorahMate, you will find it very rewarding, it’s very spiritual. Its almost like a vitamin for me, so I encourage each person to get a TorahMate."</h3>
   <p class="text-center">
   -Shifra  Goldis 
   <span style="font-style:italic;">Melville, NY</span>
   </p>
    </div>

    <div class="testimonial-fade-three">
   <h3 class="text-center" style="font-weight:lighter; line-height:32px; font-style:italic;">
   “My TorahMate has become my best friend. Everything we do we talk about, and it’s all in the framework of learning and Torah. Somehow it always ties back to the Torah that we’re studying or something we’ve learned together. We have an amazing relationship because of the foundation through Torah that we have.
If you get a TorahMate – that can be the best thing that ever happened to you. 
My TorahMate Laura Gornbine from Baltimore and I are the best of friends, even though we are a hundred or more miles apart. It is the most special time when we get to speak. Oorah has pared us up so perfectly! We have so many things in common. We are an amazing team, and have a very close friendship. 
"</h3>
   <p class="text-center">
   -Laurie Goldstone
   <span style="font-style:italic;">Woodmere, NY</span>
   </p>
    </div>

    </div>
    </div>
    </div>
  </div>

这是我的 CSS：

@-webkit-keyframes fade-in
from
    opacity:1;

to
    opacity:0;


.testimonial-fade-one
display:inline;
position:relative;
top:0px;
-webkit-animation:fade-in 1s infinite;


.testimonial-fade-two
opacity:0;
display:inline;
position:relative;
margin-left:-56px;
-webkit-animation:fade-in 1s infinite;
-webkit-animation-delay:0.5s;

.testimonial-fade-three
opacity:0;
display:inline;
position:relative;
margin-left:-56px;
-webkit-animation:fade-in 1s infinite;
-webkit-animation-delay:1s;


.testimonial-fade-group
display:inline;
width:100%;
height:400px;

我不希望我的文字移动，只是淡出。

【问题讨论】：

请查看此链接***.com/questions/11679567/…

这个演示只有一个段落淡入一次 - 而不是几个相互淡入。

【参考方案1】：

display: inline; 导致问题。只需将其删除即可。

【讨论】：

所以现在第二个和第三个分别闪烁。第一个是什么都不做，他们应该是来代替彼此，而不是在不同的地方。

对不起，我离开了显示：内联；在第一个错误。谢谢。

我仍然有问题，虽然它没有循环。当我在每个推荐上都有无限时，它只是循环那个单独的推荐。我如何让第一个只有在最后一个消失时才回来？