如何延迟CSS动画的开始？

Question

我正在尝试延迟CSS动画的触发器(不会减慢动画本身的速度,但会在启动前延迟几秒钟).并且在动画运行之前不应显示图像.我查看了其他问题,他们似乎没有解决这个问题.

我的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>

旁注:还有办法让它与<a>标签一起使用吗？动画似乎不适合这个:

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

Answer 1

延迟动画的开始非常简单.只需将animation-delay属性添加到您的代码中:

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

需要注意的是很重要的animation-delay只是延迟开始从一开始的动画.如果你有一个重复的动画,它不会将延迟添加到每个循环的同一点; 只到一开始.目前没有能够进行这种循环延迟的CSS属性.

Firefox已经支持该animation-delay属性很长一段时间(我认为总是,实际上),但对于其他浏览器(Chrome,Safari),您需要使用<a>前缀.

关于<a>元素的第二个问题:是的,它可以工作.它现在不适合你的原因是因为display: inline-block;元素是内联元素.为了使它像您期望的那样工作,请添加.slideRight{}到animation-delay选择器.最终,这就是您的代码的样子:

.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示例