Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I delay the start of a CSS animation?

I'm trying to delay the trigger of a CSS animation (not slow down the animation itself, but delay it a few seconds before starting). And the image should not display before the animation runs. I looked through the other questions, and they don't seem to address this.

MY FIDDLE: http://jsfiddle.net/omarel/guh5f8bs/

CSS

.slideRight{

    animation-name: slideRight;
    -webkit-animation-name: slideRight;   

    animation-duration: 1s;   
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out;   
    -webkit-animation-timing-function: ease-in-out;       

    visibility: visible !important;   
}

@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }

    100% {
        transform: translateX(0%);
    }   
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
    }

    100% {
        -webkit-transform: translateX(0%);
    }
}

HTML

<div class="slideRight">
    HI
</div>

Side note: Also is there a way to get it to work with an <a> tag? Animations don't seem to play nice with this:

<a class="slideRight">
    HI
</a>
like image 255
Omar Avatar asked Apr 08 '15 19:04

Omar


People also ask

Can you pause CSS animation?

The only way to truly pause an animation in CSS is to use the animation-play-state property with a paused value. In JavaScript, the property is “camelCased” as animationPlayState and set like this: element. style.

How do I add a delay to a keyframe?

Another technique is to create a new set of @keyframes that is responsible for hiding the animation during the delay. Then, apply that with the original animation, at the same time. A limitation of this technique is that the pause between animations must be an integer multiple of the “paused” keyframes.

What property specifies a delay for the start of an animation?

The animation-delay property specifies a delay for the start of an animation. The animation-delay value is defined in seconds (s) or milliseconds (ms).


1 Answers

Delaying the start of the animation is very simple. Simply add the animation-delay property to your code:

.slideRight{
    animation-name: slideRight;
    animation-duration: 1s;   
    animation-timing-function: ease-in-out;        
    visibility: visible !important;
    /* New code here: */
    animation-delay: 1s;
}

It's important to note that animation-delay only delays the start of the animation from the beginning. If you have a repeating animation, it won't add the delay to the same spot of each loop; only to the very beginning. There's currently no CSS property capable of that kind of looped delay.

All major browsers currently support animation-delay without the need for vendor prefixes.


As for your second question regarding the <a> element: Yes, it can work. The reason it's not working for you now is because <a> elements are inline elements. In order to make it work like you're expecting, add display: inline-block; to the .slideRight{} selector. Ultimately this is what your code will look like:

.slideRight{
    animation-name: slideRight;
    animation-duration: 1s;   
    animation-timing-function: ease-in-out;     
    visibility: visible !important;
    /* New code here: */
    animation-delay: 1s;
    display: inline-block;
}


@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }

    100% {
        transform: translateX(0%);
    }   
}
<a class="slideRight">HI</a>

JSFiddle Example

like image 60
TylerH Avatar answered Sep 23 '22 17:09

TylerH