I tried doing what seemed to work for others in the answer to this question:
How to Fade In/Out multiple texts using CSS/jQuery like on Droplr?
It didn't work for me. I'm wondering what I might be doing wrong?
My question is not like the one above, because this one only seems to have one fading in and then staying static, while I want a few different text blocks to fade into each other and loop.
Here is the page: http://www.torahmates.org/index-test.asp
Scroll down to the bottom - I am working on the three testimonials trying to get them to fade into each other.
Here is my code:
<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>
And here is my 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;
}
I don't want my text to move, just to fade.
