添加settimeout函数

Question

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

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>

旁注：还有办法让它与<a>标签配合使用吗？动画似乎不会很好用：

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

Answer 1

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

.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;
    /* New code here: */
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

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

Firefox长期以来一直支持animation-delay属性（我认为总是如此），但对于其他浏览器（Chrome，Safari），您需要使用-webkit-前缀。

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

.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;
    /* New code here: */
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
    display: inline-block;
}


@keyframes slideRight {
    0% {
        transform: translateX(-150%);
    }

    100% {
        transform: translateX(0%);
    }   
}

@-webkit-keyframes slideRight {
    0% {
        -webkit-transform: translateX(-150%);
    }

    100% {
        -webkit-transform: translateX(0%);
    }
}

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

JSFiddle Example

Answer 2

div {
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    animation-delay: 2s;
}

来源：

https://www.w3schools.com/cssref/css3_pr_animation-delay.asp https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

Answer 3

添加settimeout函数

您好，可以添加一个事件监听，当您将鼠标悬停在某个元素上然后在1秒后调用该函数。

$('slideRight').on('mouseover',function(){

window.setTimeout(function(){
    $this.addClass('onesecond');
}, 1000); //<-- Delay in milliseconds
 });

如何延迟CSS动画的开始？

3 个答案:

添加settimeout函数