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;会导致问题。只需删除它就可以了。

使用css淡入淡出文本

1 个答案: