如何延迟CSS动画的开始? [英] How can I delay the start of a CSS animation?

问题描述

我正在尝试延迟CSS动画的触发(不降低动画本身的速度，而是将其延迟几秒钟才开始).并且图像不应在动画运行之前显示.我浏览了其他问题，他们似乎没有解决这个问题.

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.

我的孩子: 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>标记一起使用吗?动画似乎不能很好地发挥作用:

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>

推荐答案

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

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;
}

请务必注意，animation-delay仅从一开始就延迟动画的开始.如果您有重复的动画，则不会将延迟添加到每个循环的同一位置；只是从一开始.当前尚无CSS属性能够实现这种循环延迟.

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.

当前所有主流浏览器均支持animation-delay，而无需供应商前缀.

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

关于关于<a>元素的第二个问题:是的，它可以工作.现在对您不起作用的原因是因为<a>元素是 inline 元素.为了使其按预期工作，请将display: inline-block;添加到.slideRight{}选择器.最终，这就是您的代码的样子:

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

这篇关于如何延迟CSS动画的开始?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！