Как скрыть объект, чтобы начать его анимацию?

Question

Я написал анимацию, а затем я внедрил и отложил ее в свой html-код через jquery. Но потом я понял, что анимация не проходит гладко (это от самого большого, а затем исчезает, а затем выходит на экран по-разному). Я хочу, чтобы этот объект был скрыт за 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