如何隱藏對象以啓動其動畫？

我寫了一個動畫，然後通過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; 
    }

來源

2016-11-23 I_love_pugs

你應該添加opacity:0;到你的對象

這樣就不會出現，直到動畫開始

#myobject{ 
    opacity:0; 
}

添加另一個類opacity:1;並使其重要：

.visible{ 

    opacity:1!important; 
}

，並與其他類添加在腳本中

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

這將使它在動畫結束後保持可見狀態。

Working demo

來源

2016-11-23 21:12:09 Chiller

但是它在動畫之後也消失了。我希望它留在屏幕上。 –

我解決了你只需添加另一個不透明類的問題：1請參閱我的答案。 – Chiller

非常感謝，它的作品。我非常感謝你的幫助。但我只是添加了這個「不透明：1！重要」;到「.bounceInLeft」。 –

如何隱藏對象以啓動其動畫？

回答

相關問題