CODEWITHSUNDEEP
csscss-transitions
Monstr92
Monstr92

Reputation: 404

CSS3 Text Animation Overlaps First-Child Too Quickly on Restart

http://jsfiddle.net/L7pV9/embedded/result/

I've added a jSfiddle for those that want to see the example

Anyways, I can't for the life of me figure out what is happening with my CSS3 animation. I have two span classes where one is labeled Text1, and the other Text2.

And so when the animation runs, the words fade out and then the second label fades in and vice versa. The problem is on the second run of the animation label1 will spawn in again, but only for a short while because label 2 seems to be overlapping it / eating it. How can I stop the animation from looking glitchy, and the labels to evenly re-spawn?

It looks like when text2 finishes, it calls text1, but text1 doesn't last as long and it just keeps doing it over and over.

Here's the code. CSS

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

CSS-Animations 

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

HTML 

          <div class="logoText">
                <span>Text1</span>
                <span>Text2</span>
            </div>

Upvotes: 1

Views: 691

Answers (1)

vals
vals

Reputation: 64174

You distribute the time in a non-even way, and that is what you get :

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

}

Will get full opacity 87% of the time (from 10 to 97); half-way opacity 11% of the time, and full transparency only 2% of the time.

Then, most of the time you see only the div that is in front.

If you want to distribute time evenly, with say 10% of the timeline to the transition, it would be:

@-webkit-keyframes fadeText {
    0% { opacity: 0; -webkit-transform: translateY(-2px); }
   10% { opacity: 1; -webkit-transform: translateY(0px); }
   50% { opacity: 1; -webkit-transform: translateY(0px); } 
   60% { opacity: 0; -webkit-transform: translateY(2px); } 
  100% { opacity: 0; -webkit-transform: translateY(2px); }
}

It would also be nice to end in the same state that you begin. May be the first translateY should be positive (2px) ?

Upvotes: 2

Related Questions