CSS keyframe animation hyperlinks - css

Question

I am working with a text slider which is animated with css keyframes. Have added anchor tags to text headings to make hyperlinks. The hyperlinks do not behave as expected. The idea is that each rotating text-heading links to a different place further down the web page.
Can someone familiar with css keyframe animations inspect the reference links below and recommend a solution please.
Reference text slider html
Reference text slider css

Answer 1

When using position absolute you have to take care of the z-index because all child elements are placed on the same position. So you can fix that in your animation by doing this:
#keyframes leftToRight {
0% {
opacity: 0;
z-index: -1;
}
5% {
opacity: 0;
z-index: -1;
-webkit-transform: translateX(-50px);
}
10% {
opacity: 1;
-webkit-transform: translateX(0px);
z-index: 1;
}
25% {
opacity: 1;
-webkit-transform: translateX(0px);
z-index: 1;
}
30% {
opacity: 0;
z-index: -1;
-webkit-transform: translateX(50px);
}
80% {
opacity: 0;
z-index: -1;
}
100% {
opacity: 0;
z-index: -1;
}
}
Ah and you have some typos in your hrefs :-)

Answer 2

opacity doesn't do the display: none; trick, so you can still click on the anchor even it was opacity: 0;. and because all the elements was overlapped, so every time you click, you can only click the top one, which is #intelligent (no z-index config, and it is the last item in html in .slidingHorizontal)
Add .slidingHorizontal span { display: inline-block; }, so that you can adjust the width of <span>.
Add opacity: 0; along with width: 0; in keyframe. (Because .slidingHorizontal span { overflow: hidden; }, so that your anchor will not be able to be clicked inside a width:0 container;
/*Body*/
/*Horizontal Sliding*/
.slidingHorizontal{
display: inline;
text-indent: 8px;
}
.slidingHorizontal span{
animation: leftToRight 12.5s linear infinite 0s;
-ms-animation: leftToRight 12.5s linear infinite 0s;
-webkit-animation: leftToRight 12.5s linear infinite 0s;
/* color: #00abe9;*/
opacity: 0;
overflow: hidden;
position: absolute;
display: inline-block;
}
.slidingHorizontal span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.slidingHorizontal span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.slidingHorizontal span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.slidingHorizontal span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}
/*leftToRight Animation*/
#-moz-keyframes leftToRight{
0% { opacity: 0; width:0; }
5% { opacity: 0; width:0; -moz-transform: translateX(-50px); }
10% { opacity: 1; width:auto; -moz-transform: translateX(0px); }
25% { opacity: 1; width: auto; -moz-transform: translateX(0px); }
30% { opacity: 0; width: 0; -moz-transform: translateX(50px); }
80% { opacity: 0; width: 0;}
100% { opacity: 0; width: 0;}
}
#-webkit-keyframes leftToRight{
0% { opacity: 0; width: 0;}
5% { opacity: 0; width: 0; -webkit-transform: translateX(-50px); }
10% { opacity: 1; width: auto; -webkit-transform: translateX(0px); }
25% { opacity: 1; width: auto; -webkit-transform: translateX(0px); }
30% { opacity: 0; width: 0; -webkit-transform: translateX(50px); }
80% { opacity: 0; width: 0; }
100% { opacity: 0; width: 0; }
}
<header>
<h1>Rotating words using CSS Animations</h1>
</header>
<h2 class="sentence">check this out...
<div class="slidingHorizontal">
<span>cool.</span>
<span>elegant.</span>
<span>beautiful.</span>
<span>different.</span>
<span>intelligent.</span>
</div>
</h2>
<div id="cool">
<h2>Cool</h2>
</div>
<div id="elegant">
<h2>Elegant</h2>
</div>
<div id="beautiful">
<h2>Beautiful</h2>
</div>
<div id="different">
<h2>Differnt</h2>
</div>
<div id="intelligent">
<h2>Intelligent</h2>
</div>

Answer 3

Made progress by exploring the visibility option. I was able to make the links work in a peculiar way.
1- On initial page load and first word-rotation-cycle the links point all to the last link.
2- After the first cycle completes the links point to the correct destination.
I don't understand why that is and how to fix it.
text slider v2
text slider css v2