How can I delay the start of a CSS animation?

Question

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>

Answer 1

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