CODEWITHSUNDEEP
csscss-animations
andy
andy

Reputation: 2754

Pause css animation when it's finished

So I'm trying to animate some text dropping down once its finished animating.

The problem is it just disappears after it's finished, even though I set the opacity to 1@ 100%.

/* text animation */

@-webkit-keyframes textAnimation { 
    0% {
        opacity: 0;
        -webkit-transform: translateY(-200%);
    }
    10% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0%);
    }

}




.text-animation {
    z-index: 1000;


    width: 100%;
    text-align: center;
    opacity: 0;
    -webkit-animation: textAnimation 2s linear  2s;
    -moz-animation: textAnimation 2s linear  2s;
    -o-animation: textAnimation 2s linear  2s;
    -ms-animation: textAnimation 2s linear  2s;
    animation: textAnimation 2s linear  2s;
     -webkit-animation-iteration-count: 1;
      -webkit-animation-delay: 1s;
    -moz-animation-delay: 1s;
    -o-animation-delay: 1s;
    -ms-animation-delay: 1s;
    animation-delay: 1s;
}

/* text animation */

I just don't understand what the problem is here...

Upvotes: 1

Views: 2042

Answers (2)

whoacowboy
whoacowboy

Reputation: 7447

This worked for me.

If you set the end state in the class and not add a delay.

@-webkit-keyframes textAnimation {
    0% { opacity: 0; -webkit-transform: translateY(-200%); }
    33% { opacity: 1; -webkit-transform: translateY(-200%); }
    100% { opacity: 1; -webkit-transform: translateY(0%); }
}

.text-animation {
color:#fff;
font-size:32px;
width: 100%;
text-align: center;
opacity: 1;
-webkit-animation: textAnimation 3s linear;
-moz-animation: textAnimation 3s linear;
-o-animation: textAnimation 3s linear;
-ms-animation: textAnimation 3s linear;
animation: textAnimation 3s linear;
}

Upvotes: 1

Cyril F
Cyril F

Reputation: 1882

In you .text-animation declaration add this :

-webkit-animation-fill-mode: forwards;

Thanks to it, your animation will stay to the last keyframe state. (here, opacity 0).

You can see the result here : http://codepen.io/joe/pen/CkbcL

Source : https://developer.mozilla.org/en-US/docs/CSS/animation-fill-mode

Upvotes: 1

Related Questions