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

Question

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

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

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

Answer 1

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