jquery - 如何隐藏对象以开始其动画？

Question

我编写了一个动画，然后通过 jquery 将其实现并延迟到我的 html 代码中。但后来我意识到动画并不顺利(它从一开始就消失了，然后正确地出现在屏幕上)。我想让这个对象隐藏 1.25 秒，然后同时开始播放动画。我在这个网站上显示我的代码时遇到了一些问题(堆栈溢出)，对此深表歉意。

JS:

<script>
setTimeout( function(){
$('#myobject').addClass('animated bounceInLeft');
}, 1250)
</script>

CSS: `

 @-webkit-keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355,1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
    }

    60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
    }

    75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
    }

    90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
    }

    to {
    -webkit-transform: none;
    transform: none;
    }
    }
    @keyframes bounceInLeft {
    from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }

    0% {
    opacity: 0;
    -webkit-transform: translate3d(-3000px, 0, 0);
    transform: translate3d(-3000px, 0, 0);
    }

    60% {
    opacity: 1;
    -webkit-transform: translate3d(25px, 0, 0);
    transform: translate3d(25px, 0, 0);
    }

    75% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
    }

    90% {
    -webkit-transform: translate3d(5px, 0, 0);
    transform: translate3d(5px, 0, 0);
    }

    to {
    -webkit-transform: none;
    transform: none;
    }
    }

    .bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
    } 

`

Answer 1

你应该添加 opacity:0; 到你的对象

这样直到动画开始才会显示

#myobject{
   opacity:0;
}

添加另一个 opacity:1; 的类并使其变得重要:

.visible{

  opacity:1!important;
}

并将其与其他类一起添加到您的脚本中

setTimeout( function(){
$('#myobject').addClass('animated bounceInLeft visible');
}, 1250)

这将使它在动画结束后保持可见。

Working demo