http://jsfiddle.net/L7pV9/embedded/result/
If you're interested, I've provided a jSfiddle link where you can view the example.
I'm struggling to understand what's going wrong with my CSS3 animation. In my code, I have two span classes: one labeled Text1 and the other Text2.
During the animation, the words fade out and then the second label fades in, and vice versa. However, on the second run of the animation, label1 briefly reappears because it seems like label 2 is overlapping or overriding it. How can I prevent this glitchiness and make the labels smoothly transition?
It appears that when text2 finishes its animation, it triggers text1's animation again, creating a loop without giving text1 enough time to display.
Below is the snippet of CSS code:
.logoText{
display: inline;
padding: 3px 0 0 0;
}
.logoText span {
background: #0c0d0f;
padding-right: 100px;
position: absolute;
opacity: 0;
overflow: hidden;
float: left;
color: #6f6f6f;
font-size: 13px;
font-weight: 400;
letter-spacing: 1px;
text-transform: uppercase;
-webkit-animation: fadeText 10s linear infinite 0s;
-moz-animation: fadeText 10s linear infinite 0s;
-o-animation: fadeText 10s linear infinite 0s;
-ms-animation: fadeText 10s linear infinite 0s;
animation: fadeText 10s linear infinite 0s;
}
.logoText span:first-child {
background: #0c0d0f;
}
.logoText span:nth-child(2) {
background: #0c0d0f;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-o-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
}
The CSS-Animations keyframes are defined as follows:
@-webkit-keyframes fadeText {
0% { opacity: 0; -webkit-transform: translateY(-2px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
97% { opacity: 1; -webkit-transform: translateY(0px); }
98% { opacity: 0; -webkit-transform: translateY(2px); }
100% { opacity:0; -webkit-transform: translateY(2px); }
}
Here's the HTML structure used:
<div class="logoText">
<span>Text1</span>
<span>Text2</span>
</div>