How can I delay the start of a CSS animation?

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